Thread

Ok.. I’m very new at XHML & CSS and I got stuck here so maybe someone can help me out.

I’m trying to place the shadow effect of the orange bar in a separate <div>. The way I did it works with Firefox but not with IE as you can see in the pics. IE creates a gap under the shadow graphic inside that div.

This is the code I’m using:

THE CSS

#shadow {
 background: #fff url(images/bg-shadow-bottom.gif) no-repeat 0px -0px;
 height: 8px;
}

#leftcolumn { 
 float: left;
 color: #333;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 370px;
 background: #fff url(images/bg-fade.gif) repeat-x;
}

#rightcolumn { 
 float: right;
 color: #333;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 350px;
 display: inline;
 background: #fff url(images/bg-fade.gif) repeat-x;
}

THE HTML

<!-- Begin Shadow -->
<div id="shadow">
</div> 
<!-- End Shadow -->
                
    
<!-- Begin Left Column -->
<div id="leftcolumn">
         
Left Column    
         
</div>
<!-- End Left Column -->
         
<!-- Begin Right Column -->
<div id="rightcolumn">
               
Right Column
         
</div>
<!-- End Right Column -->

Thanks.

:down:

hi amigo 😊

fast answer, i think it’s a damn minimum IE box height (20px)...

try to put some html comment inside od shadow div

like this

<div id="shadow"><!--Please use Firefox--></div>

if that help,, thats the problem

bye
d

Why do you want to put the shadow in a separate DIV?

because of the cascading nature of CSS, next time, try to send a link to code in context so we can better help.

my guess would be either line-height or font-size

try:

#shadow {
background: #fff url(images/bg-shadow-bottom.gif) no-repeat;
height: 8px;
font-size: 1px;
}

Also, as an OT (but very relevant) note, you shouldn’t name your IDs and classes in relation to their appearance, meaning, you should not call them “rightcolumn” but “main_content” for example. Think in terms of meaning, not position or appearance. You might think that this column will be on the right for ever… until the next redesign. Same reason why you would call a class “alert” and not “red” because someday your alerts will have to be green… On top of that, you’ll end up using that “blue” class for unrelated elements and somedays you’ll have to change all those alert links to green and it will change all those headers to green too…

You get the idea 😉

Also, as an OT (but very relevant) note, you shouldn’t name your IDs and classes in relation to their appearance, meaning, you should not call them “rightcolumn” but “main_content” for example.

I disagree in terms of Class names as classes are designed to be re-used so this won’t always work.

For example you might talk about a row of pictures. The DIV ID holding all the pics might be called #gallery but the classes might be .picRow plus you can add additional classes such as <div class=“green right horizontal”>.

The .picRow could work if the markup is there solely for layout purpose, but that’s not the case for that right column / left colum example I’m talking about.

I personally think that “green right horizontal” is a very poor choice for class names… for the reasons stated above.

The .picRow could work if the markup is there solely for layout purpose, but that’s not the case for that right column / left colum example I’m talking about.

I personally think that “green right horizontal” is a very poor choice for class names… for the reasons stated above.

They are designed to be re-used. If not then use an ID.

I wasn’t talking about his example in particular, just your idea that Classes should be named for the content they will hold. Sometimes this holds true. For example a class might be used for a warning box so a class of .warning works nicely.

You can also use classes to assign presentation to a DIV for example and use them multiple times.

Classes should be named for the content they will hold.

Not what I said.

Classes should be named for the content they will hold.

Not what I said.

Apologies, I think I have misunderstood your post then.

yeah, I don’t think we’re talking about the same thing, I wasn’t even talking about Class vs. ID - We should probably stop there or Efraín Bárcena’s going to freak out when he gets back here… 😉

Ok handshakes and increased post counts all round 😊

We should probably stop there or Efraín Bárcena’s going to freak out when he gets back here…

ho yes I did   :gulp:  JK

Thanks for your help and tips guys. Both solutions (davor’s & minimal design’s) work perfectly. Now… which one will it be the most “appropriate” one to use???

Thanks.

Although, if you’re using templates, it might not be an issue, but try to centralize all your stuff in one place as much as possible. this will makes changes easier in the future, Adding 1 CSS rule is always faster than adding a comment in all your HTML files.

On a Standards “philosophical” level, if there’s such a thing, you should keep all your presentation layer in your CSS as much as possible, so the CSS solution is more “appropriate.”

That said, I like the idea of subliminal Firefox advertising 😉

Although, if you’re using templates, it might not be an issue, but try to centralize all your stuff in one place as much as possible. this will makes changes easier in the future, Adding 1 CSS rule is always faster than adding a comment in all your HTML files.

On a Standards “philosophical” level, if there’s such a thing, you should keep all your presentation layer in your CSS as much as possible, so the CSS solution is more “appropriate.”

That said, I like the idea of subliminal Firefox advertising 😉

Very well explained. Again… thanks for your help.