CODEWITHSUNDEEP
cssinternet-explorerhtmlmargins
Katie
Katie

Reputation: 39

Internet Explorer issue

This site has an issue with the center content portion. For some reason in internet explorer just a couple of letters are being cut off by the sidebar. I have no idea why, or how to fix it. The div floats right, so I figured adding a few pixels of margin to the right would do the trick. It doesn't...

It's this way on IE8 and I'm actually running IE 7.4 through parallels on a Mac.

Any suggestions?

http://www.thesurgicalsolution.com/

Upvotes: 1

Views: 103

Answers (2)

andyb
andyb

Reputation: 43823

In an ie.css you have:

#content, .sidebar { overflow: hidden; }

which is clipping the text in IE only. So if you remove this rule the text will no longer be clipped. It is possible that this rule exits for a reason though, so you might want to test the whole site before just deleting it.

Edit: I would also fix the validation errors as well as I have had unexplained rendering issues on different browsers in the past which were caused by invalid markup.

Edit 2: The #content parent <div> has a defined width (and is overflow:hidden) but a child <div> also has a defined width and its position makes it greater than the right edge of the parent and is therefore clipped by the parent's overflow rule. So as an alternative, you could make the .rightbox narrower to avoid the overflow hiding in IE.

.custom #content .box-wrapper .rightbox {
    float: right;
    width: 451px; /* <-- change this */
    margin-right:5px;
}

Upvotes: 1

Ry-
Ry-

Reputation: 225273

I don't know why that happens, but adding a padding-left: 3px anywhere that applies to it fixes it.

Upvotes: 0

Related Questions