7 replies [Last post]
Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

Alright guys, I've got an issue here. I've been working with CSS for a couple of years now but I just can't figure out what I've done wrong. Last night, I worked on some minor esthetic issues of my website but it looks like I did something that broke my interface.

Basically, my right menu column no longer aligns properly. It should sit flush with the gap at the top-right, vis-a-vis the left column but for some reason, it insists on clearing the left side before doing so.

I know there's an insignificant detail I missed or edited but I just can't seem to find it and I've been fiddling for a few hours. Can anybody spot the flaw? I haven't been able to test under Firefox or Opera but I'm fairly sure it would render without a hitch. However, on IE6.0.28, it looks pretty horrible right now. I don't think it's a box model issue since it did render fine a day ago and I haven't really done any updates to the frame.

Here's the site and stylesheet in question.
http://www.steelfrog.com
http://steelfrog.com/wp-content/themes/steelfrog/style.css

Please let me know if you have any questions. I'll post more if I find anything.

=======================================
Steel Frog
http://www.steelfrog.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 4 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You need a -3px margin for

You need a -3px right margin for the float (tlcontainer) in IE. Also, the left margin on the menucontainer should only be 458px, but for some reason (probably the 3px margin) it needs to be 455px in IE.

Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

Seems to have fixed the

Seems to have fixed the issue with Firefox 2.0 and Internet Explorer 7.0.
Don't have IE6 at home but I'll try from work tomorrow.

Thanks for the tip!

=======================================
Steel Frog
http://www.steelfrog.com

Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

Update: Ok, so my fix

Update: Ok, so my fix resolved the issue on Firefor and IE7, but not IE6.
Your work-around seems to do the trick so I'm wondering if there was a way for me to implement those without using the if=IE6 loading of a seperate stylesheet? I.E., is there a CSS hack that only IE6 picks up on?

=======================================
Steel Frog
http://www.steelfrog.com

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 21 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

If its broken in IE6, it

If its broken in IE6, it probably is for ie5 too. You could use the holly hack (using the * html hack) because ie7 can't see that.

Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

ClevaTreva wrote:If its

ClevaTreva wrote:
If its broken in IE6, it probably is for ie5 too. You could use the holly hack (using the * html hack) because ie7 can't see that.

Thanks for the reply. I'm not too well-versed on hacks since I never really had to implement them before. Would the following method work? If I recall, the Holly hack should be something close to this, right?
*html #tlcontainer { margin-right: -3px; }

=======================================
Steel Frog
http://www.steelfrog.com

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 21 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

You need a space after the *

You need a space after the *

Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

*Smack head* Right. Thank

*Smack head* Right. Thank you.
Alright, looks like it renders fine in IE6 now. I'll check it from Firefox 1.5, 2.0 and IE7 when I got home and hopefully, everything should be fine.

[EDIT] Looks fine in Firefox 2.0.0.1 portable.
[EDIT] Passed IE7 too. Awesome. Looks like it's resolved for now.

=======================================
Steel Frog
http://www.steelfrog.com