/    Sign up×
Community /Pin to ProfileBookmark

CSS problems in IE vs. Firefox

Copy linkTweet thisAlerts:
Aug 28.2007

I’m in desperate need of advice from anyone available.

I’m putting together a site, and everything is falling into place nicely in Firefox. You can see it at [url]http://modules.contentthatworks.com/pets/dogs.html[/url].

But the formatting just won’t cooperate in IE. Specifically IE7 as that’s the only version I have access to. Can somebody please look at the site in both browsers, and give me some insight into why in IE7 I have horizontal gaps between the header –> navbar –> grey line –> content, and why my right sidebar won’t float up next to the content on the left? I’ve had to fight between the two browsers before when using table based layouts, but this is all divs and it’s driving me crazy.

Thanks in advance for any help you can provide.

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@elainebludfairyAug 28.2007 — i have a similar problem.. only mine isnt even in divs.. my image look how i wanted it positioned on firefox but on IE its about 4mm lower..

help me too please..
Copy linkTweet thisAlerts:
@TJ111Aug 28.2007 — Ie is Kinda funny. You have two options here. First you can just move the ctw-sidebar div ABOVE the left div in your source code. Or you could change the following:
<i>
</i>.ctw-left-content {
background: #fff url(http://www.pets2008.com/template_images/teasr_generic_BG_gradient.gif) repeat-x top left;
width: 404px;
height: auto;
float: left;
border: solid 1px blue;
}

.ctw-sidebar {
width: 299px;
height: auto;
float: [b]left[/b]; &lt;--This was right
padding-left: 10px;
padding-top: 10px;
border: solid 1px red;
}
Copy linkTweet thisAlerts:
@CTWorionauthorAug 28.2007 — changing the float to "left" works fine in Firefox, but it's just dropping the sidebar directly below the left content.

And putting the sidebar code on top of the left content code puts the sidebar on the left. I guess I should make it clear I want the sidebar on the right.
Copy linkTweet thisAlerts:
@TJ111Aug 28.2007 — If you code it above the left div, add "clear:right" to the css property. If it's below and floated left, set it to "clear:none". You could also try it without any float properties.
Copy linkTweet thisAlerts:
@CTWorionauthorAug 28.2007 — That is so weird. I actually had to put the right sidebar on top of the left content -- float it right while the left content is floated left -- and put a clear: right on the sidebar. At that point it worked in IE, but not in Firefox. So I added clear: left to the left content and now it works in both. I can't believe you have to do things so unintuitively just to get IE to work.
Copy linkTweet thisAlerts:
@CTWorionauthorAug 28.2007 — Thank you so so much for the assist. Now do you have any idea why I have gaps between elements like the header and navbar and grey line at the top?
Copy linkTweet thisAlerts:
@TJ111Aug 28.2007 — Could be IE's default margins, who knows. Try adding this to the top of your CSS (being redundant never hurts for IE).

<i>
</i>* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}


"I can't believe you have to do things so unintuitively just to get IE to work." I feel your pain
Copy linkTweet thisAlerts:
@CTWorionauthorAug 28.2007 — Looks like that didn't work. Maybe I'll try some IE only negative margins or something.
Copy linkTweet thisAlerts:
@CTWorionauthorAug 28.2007 — Wow, that actually worked. couple negative top margins for IE only and it now looks the way I want. Thanks again for all of the help.
Copy linkTweet thisAlerts:
@drhowarddrfineAug 29.2007 — Well, you should have been told the number one reason for all your problems. You aren't using a doctype. Without one, IE is in quirks mode and won't act like a modern browser would. See my link below. Use html4.01 strict, but you've already changed things around so don't know what will happen now.

The doctype is the set of rules you are telling browsers you are following. IE botches the whole thing up.
×

Success!

Help @CTWorion spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...