Fri, 2004-05-07 17:00
Hi there, I'm new to these forums, and I'm really starting to get the hang of using structural markup and valid CSS, but I'm still getting used to working around IE's bugs. I have a couple of problems in this layout I'm working on that only show up in IE. I don't have Windows, so I only get to look at my site in IE when I'm at work, and I don't have too much time.
Everything is perfect in Safari and Mozilla, and the part that's giving me trouble even works fine in IE for Mac.
So here we go...
The yellow picture in the sidebar gets pushed below #maincontent. It's the exact width that the sidebar should be, but for some reason, it gets pushed two pixels to the right. The h2 directly above it (that it should butt up against) looks exactly right. By reducing the width of the img by 2 pixels, it shows up where it should be vertically, but it's pushed to the right.
Can anybody figure it out?
Fri, 2004-05-07 19:04
#1
Is IE or bad CSS to blame for my problem?
Hi
I haven't looked at your code, but you will find all known (I think) IE bugs (and other browsers) at
You may have the 3 pixel jog or the broken float model. I think this is fixed by setting a negative right margin of 3px for IE (but check Big John's site above first):
/* \*/* html #mydiv{margin-right:-3px}/* */
EXACTLY like that gives the margin ONLY to IE Windows to the style mydiv.
Oh, BTW you also have the disappearing text bug! The Title of The Article header/link is missing on first visit, but appears on mouseover (but the shadow left/right disappears).
You'll find that bug on his site too.
Trevor
Fri, 2004-05-07 23:33
#2
Is IE or bad CSS to blame for my problem?
I applied that hack to both #maincontent and the image in the sidebar and nothing happened. What really confuses me is how the image gets pushed over but not the H2 directly above it (The part that says this is a promo).
Can you take a look and see if I applied it properly?
Check out htp://www.illtron.com/noshadow.html to see the changes
Sat, 2004-05-08 04:29
#3
Is IE or bad CSS to blame for my problem?
I applied that hack to both #maincontent and the image in the sidebar and nothing happened. What really confuses me is how the image gets pushed over but not the H2 directly above it (The part that says this is a promo).
Can you take a look and see if I applied it properly?
Check out htp://www.illtron.com/noshadow.html to see the changes
Sat, 2004-05-08 08:40
#4
Is IE or bad CSS to blame for my problem?
illtron wrote:
I applied that hack to both #maincontent and the image in the sidebar and nothing happened. What really confuses me is how the image gets pushed over but not the H2 directly above it (The part that says this is a promo).
Can you take a look and see if I applied it properly?
Check out htp://www.illtron.com/noshadow.html to see the changes
Hi
I've taken your original page onto my server and will play with it and post you the results later.
BTW, you typed the url wrong (missed out the 2nd t in http), you might want to edit the post, and delete the duplicate post.
Trevor
Sat, 2004-05-08 09:14
#5
Is IE or bad CSS to blame for my problem?
Hi
Been and made breakfast for my wife and little daughter (both still in bed!).
And to your probelm. Remember, I have worked on your original layout.
The peekabo bug was to blame for the disappearing title.
To the #midshadow style you need to add a height of 1%, but for IE only, like this (pu it after the #midshadow style):
* html #midshadow{height:1%}
And for the dropping image, and float:left;
#sidebar #promos img {
float:left;
border-top: 0;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
border-left: 1px #ccc solid;
margin-left: 0 0 0 0;
padding: 0 0 0 0;
}Simple really.
Firefox and IE now look the same.
Trevor
Sat, 2004-05-08 17:00
#6
Is IE or bad CSS to blame for my problem?
Trevor, you rule. I'm really, really grateful for your help. I never really wished I had a Windows machine around until I suddenly had this web standards epiphany. Thanks again!