Spill problem in IE

43 ideas, to be exact.

https://validator.w3.org/check?uri=https://thatnight.net./

start there. validating is the first step in dealing with any browser issues.

Is there a way to tell where exactly the problem is? I know it tells you the line, but how does that relate to the pages?

(Sorry, new.:))

Hi thatnight,

On your homepage (https://thatnight.net/) view the source of your page (normally View menu, then View source.

This is the page to which the line numbers refer. This .html page is your homepage as it is after being parsed by the PHP parser (google something like ‘learn php’ to find out more).

Copy the source page to the clipboard (ctrl+A to select all, then ctrl+C to copy). Now open notepad (or the Mac equivalent), and paste the copied text in (ctrl+v). Now turn off word wrap via the Format menu, and turn on the status bar via the View menu. This allows you to see what line you are on, and this is shown at the bottom of the notepad window.

This will give you an idea of where the problems are occurring.

To rectify said problems, you need to do so in the original PHP file of your homepage. Do this through the WP Theme Editor.

Good Luck, hopefully I haven’t left anything important out nor put anything unimportant in… but both are likely cos it’s 1:30am and I’m tired.

-John

haha… or… to save time, firefox 2.0.0.3 shows line number in the View Source window… earlier versions may also.

Thanks!

It looks like a great deal of my problems have to do with my Flickr badge. I’m not sure if that’s going to help with my margins, but I hope it fixes something.

It’s not your flickr badge, it’s the width of your div called container.

Increase your container width to 917px (from 870px), and problem solved.

Some versions of ie use a slightly different method of calculating the width of a div‘s content as does firefox, and I believe this has caused the glitch.

– John

This improved the problem significantly, however, there’s still some overlap. Is there something in addition to the container width that may need tweaked?

Well I get no overlap, but I’m running ie7 and I guess you’re running ie6? It’s a matter of adjusting the width of l_sidebar, r_sidebar, content and container. Probably best to stick to widening container for now… you could also reduce the padding-left (or the value at d in padding: a b c d) of r_sidebar and then reducing that elements width by the same amount.

That is, in ie7 it looks like you could reduce the left padding a bit…

A really good trick is to add a border to the divs that you are fiddling with, like this border: 1px solid red; (but use different colours so u can differentiate), such that you can see the horizontal space that they take up. Best add borders to all four of those divs that I mentioned above, and then remove them again once resolved. Site looks a bit silly in the meantime, but hey, overflow is pretty ugly anyways ??

Keep increasing/decreasing div width until the borders are flush, to the point where if you add an extra pixel to the width, you get overflow or broken flow.

These borders take up a pixel of your width per side, so once you remove the borders, you can then increase each div‘s width by 2px.

omg I am tired, I gotta go bed.

Good luck,

– John

Thanks for the great advice!

I added borders, as you said, however, they only show up in firefox. I altered all of my mesurements, and still IE does not show any of my colorful borders, nor do the margins move, and the content continues to overlap the right sidebar.

So frustrating!

Thanks for the help, though!:)

When we are fault finding we need to get on top of the validation errors first. No one here can help if you persist with 43 errors in your mark up. That sounds harsh, but mark up is very unforgiving.

Root raises a valid point. You could check whether his point, or more importantly your site, is valid at https://validator.w3.org/

??

I believe I have fixed the majority of my validation errors:).

I’m still seeing overlap, however, I’m using IE for Mac (v. 5.2.3). I’m not sure if the site is OK in IE 6 and 7.

Can anyone tell me if the page looks correct in these versions of IE?

Thank you!

Looks good in IE7/win, but you still have a couple minor probs with your stylesheet:

border: 0px solid #cccccc;

should read:

border: none;, and there is a { before that, that shouldn’t be there.

and font-weight: none;

should read:

font-weight: normal;

Validate your css to see what line numbers I talk about.. https://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fthatnight.net%2F%3Fpage_id%3D203

But anyway, seems to all look identical in IE7/win and FF2.0.0.2/win.

Looks good.

– John