I have the following HTML how do I style it?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

I have the following HTML how do I style it?

Post by alex.barylski »

Joomla generates this code for me:

Code: Select all

<dl id="system-message"><dt class="message">Message</dt><dd class="message message fade">    <ul>        <li>The email address provided is invalid.</li>    </ul></dd></dl>
I'm supposed to style it using CSS...ideally I want to remove the following element with a display: none

Code: Select all

<dt class="message">Message</dt>
Unforutnately I have tried this to no avail:

Code: Select all

dl#system-message {  background-color: orange;  } dt.message {  background-color: green;  }
Background colors are just to make sure the CSS is being applied to the proper element.

Cheers,
Alex
SteveC
Forum Commoner
Posts: 44
Joined: Thu Dec 04, 2008 2:39 pm
Location: Lansing, MI

Re: I have the following HTML how do I style it?

Post by SteveC »

Code: Select all

#system-message {  background-color: orange;  } .message {  background-color: green;  }
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: I have the following HTML how do I style it?

Post by alex.barylski »

Unfortunately that won't work...as I only want to hide dt.message NOT dd.message

I do not have control over the markup either so that is not an option. :(
SteveC
Forum Commoner
Posts: 44
Joined: Thu Dec 04, 2008 2:39 pm
Location: Lansing, MI

Re: I have the following HTML how do I style it?

Post by SteveC »

Code: Select all

.message dt {  display: hidden;  background-color: green;  }
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Re: I have the following HTML how do I style it?

Post by nickvd »

PCSpectra wrote:Joomla generates this code for me:

Code: Select all

<dl id="system-message"><dt class="message">Message</dt><dd class="message message fade">    <ul>        <li>The email address provided is invalid.</li>    </ul></dd></dl>
I'm supposed to style it using CSS...ideally I want to remove the following element with a display: none

Code: Select all

<dt class="message">Message</dt>
Unforutnately I have tried this to no avail:

Code: Select all

dl#system-message {  background-color: orange;  } dt.message {  background-color: green;  }
Background colors are just to make sure the CSS is being applied to the proper element.

Cheers,
Alex

The first thing that I noticed was

Code: Select all

<dd class="message message fade">
Why two message classes? it may not cause a problem, but it's surely not doing anything productive

Code: Select all

dl#system-message {  background-color: orange;  /* does this rule work? */} dt.message {  background-color: green;  }
if the first rule doesn't work, then you have a rule that is being more specific, as in

Code: Select all

html body dt.message {}
assuming it does work, you could try to be more specific on the rule for the dt.message element.

Code: Select all

dl#system-message dt.message {display:none;}
I'd inspect the page using firebug or the webdev toolbar to see exactly what is going on with the rules.


Just to explain a little better..

Code: Select all

 <div class="bar"><span id='foo'>FOOBAR</span></div> 

Code: Select all

 div {background:red;}.bar {background:blue;}div.bar {background:green;} div span {color:green;}#foo {color:blue;}div span#foo {color:red;} 
You (should) end up with a green div with red text, as those rules are targeting the element(s) more specifically.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: I have the following HTML how do I style it?

Post by alex.barylski »

Why two message classes? it may not cause a problem, but it's surely not doing anything productive
Ask the Joomla core developers...and while your at it ask them aout their understanding of MVC and software architecture, patterns, etc...

Anyways...enough rant...back on topic:

I will try those suggestions and keep my fingers crossed. :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: I have the following HTML how do I style it?

Post by alex.barylski »

God I hate Joomla...the developers have made some of the dumbest choices I have ever seen in software...but I digress...

Code: Select all

dl#system-message dt.message {  display:none;} dl#system-message ul li {  margin: 0px;  padding: 0px;}
This works in hiding the dt...but the LI are not being styled properly. :banghead: :lol:
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: I have the following HTML how do I style it?

Post by pickle »

Try putting !important after the declarations, but before their respective ;
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: I have the following HTML how do I style it?

Post by Chris Corbyn »

!important is the work of the devil :twisted:
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: I have the following HTML how do I style it?

Post by pickle »

Generally yes, but it helps to determine if the style is being overruled elsewhere.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: I have the following HTML how do I style it?

Post by Chris Corbyn »

Firebug FTW :D
Post Reply