PDA

View Full Version : <hr /> tag won't appear in the correct place



ahallicks
Mar 20th, 2007, 11:11 AM
First thing's first, this is quite a complex page with a few conditional statements to get IE and FF to display the Gamertags correctly. There may well be a easier way but this works and validates nicely.

The problem I'm having is that the <hr /> tag that I have styled will not appear just above the "Beta Squad" heading like it does in IE6. I've no idea why so any help would be greatly appreciated:

The Page In Question (http://www.themits.co.uk/profiles.php)
The CSS for the page (http://www.themits.co.uk/style.css)

Cheers guys...

ronaldb66
Mar 20th, 2007, 11:23 AM
For lack of anything but IE: what's the result in other browsers?
Also, why did you wrap it in a div? The hr element is block level by itself so that shouldn't be needed.

ronaldb66
Mar 20th, 2007, 11:26 AM
Just a long shot here, but since floats are used in its vicinity, you may need to clear it.

[Argh! Even editing an existing post doesn't work!]

ahallicks
Mar 20th, 2007, 12:48 PM
I attempted to use the overflow: hidden; method of clearing floats, but I'll try my cheat spacer div too. I put it in a div as I was testing something, must have forgotten to take it out again!

In IE it's fine, but in FF the hr appears at the top and to the right of any content. It doesn't sit properly in my content div

koyama
Mar 21st, 2007, 04:13 PM
Also keep in mind that to center an <hr /> horizontally, in Firefox you need this
(which is also the default style, but your * {margin: 0} is ruining that)


hr {
margin: 0 auto;
}

This doesn't work in IE. Here you control the horizontal alignment using text-align (which actually doesn't make sense since hr is supposed to be block-level as ronaldb66 says)


hr {
text-align: center;
}
(again, this is also the default alignment in IE)

croatiankid
Mar 21st, 2007, 04:26 PM
Not related to your problem:
The image links at the bottom of your site that point to w3.org (valid xhtml and css) seem to have the URLs switched- the xhtml anchor has the link to the css validator and vice versa. nice site btw

ahallicks
Mar 21st, 2007, 05:56 PM
Not related to your problem:
The image links at the bottom of your site that point to w3.org (valid xhtml and css) seem to have the URLs switched- the xhtml anchor has the link to the css validator and vice versa. nice site btw

lol, didn't notice that one! Thanks for the heads up. Oh and the guy who designed it says thanks for the compliment lol :)

And thanks Koyama, after adding both those centering methods it works fine in both. I'm sure I tried them separately, but I guess not! Cheers :)

Arbitrator
Mar 21st, 2007, 11:54 PM
Just FYI, you might want to actually use images (with alternate text) for things like the navigation. Those were the last thing to load when I visited and there was effectively no navigation until then.