Cross Browser CSS problems

[mjrzasa]

Sorry, I have no idea what that means. Also, please check my page in IE, because it's really messed up with my "bar" images in the header..

Maybe you meant create a 1x1 0% opac square to act as if something is there, that's what I did

Now I just have to figure out the IE part of it..

 

[mjrzasa]

WELL, for anyone's future reference, I fixed the problems in IE with <img>, <hr>, and <div> tags creating space underneath themselves (if i have set the height under about 6 px) all you need to do is add the CSS styles of " style="line-height:1px;font-size:1px;" "
and also make the width:100%.
You can create a <hr> by making an empty div with bg color and 1px/2px/ whatever height.

 

[PixelPusher]

I tend to believe if you have to use negative values for positioning then most likely you aren't coding correctly. Meaning there is usually underlining reason such as default formatting/values getting in the way.

Hmm, negative values have their place, in margin for instance, but I agree in many cases people do not use them correctly.

 

[PixelPusher]

WELL, for anyone's future reference, I fixed the problems in IE with <img>, <hr>, and <div> tags creating space underneath themselves (if i have set the height under about 6 px) all you need to do is add the CSS styles of " style="line-height:1px;font-size:1px;" "
and also make the width:100%.
You can create a <hr> by making an empty div with bg color and 1px/2px/ whatever height.

I hate seeing this...why create an empty div tag to make a horizontal rule?? That is what an HR (horizontal rule) tag is for! Use the tags as they are intended.

If you are having issues with the hr creating space below the tag, that is because, by default, the <hr> tag is a block level element. Meaning it creates a line break after the element. If you want to change this, adjust the display property.

For example:

hr {
display:inline-block;
border:none;
background-color:#ddd;
height:1px;
margin:0;
}

If all you want is a border in the heading tag, why not ditch the <hr> entirely and add the border-bottom css property to the heading tag rule?

 

[mjrzasa]

I'm not adding a border, and I tried the display:inline and it didn't work out for me. I don't see any problem using a div for it, and <hr> performs differently on browsers.

 

[Phreaddee]

Hmmm, extraneous divs are not very semantic. Like john said, use a hr for a hr.
With a proper reset, and the correct css, you can get it to display correctly across all browsers.