Forums: Front End:

Hi All,

I've modified a theme for my wordpress based website...but im having horrible issues with IE 6 and 7 only ....Firefox and safari are perfect...

I've validated my css, and my html validation errors are based on the php and wordpress stuff, not my own code...

Anyone have any clues on what might be causing the alignment issues below my header image? My menu div, and the milddle divs, (box) & (entry) are all shorter then they're suppsed to...the exact width is supposed to be 160px.

Any help would be Kindly loved!

vinyldust.ca

and the css stylesheet is located :
vinyldust.ca/wp-content/themes/box-set-10/style.css

Cheers!

You have a header image with 610px + 20px + 20px = 650px
Your menu is only 610px
Remember that padding takes up room within the div and that borders take up room outwith the div. So the border is adding 40px outside the 610px of your header image. The menu isnt.


#menu {
width: 650px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
background-color: #fff;
list-style: none;
margin: 0;

}



Your CSS

#headimg {

	width: 610px;

	border: 20px solid #fff;

	background-color: #fff;

}



#menu {

	width: 610px;

	padding-left: 20px;

	padding-right: 20px;

	padding-bottom: 30px;

	background-color: #fff;

	list-style: none;

	margin: 0;

}

Thanks! ... I implemented that, and it corrected the menu in IE, but now firefox is overblown, so I should likely create a hack statement within the css? or create a new stylesheet with a swapper?

I suppose, I should relook at my widths for the other pieces too then? my sidebar is still out of line...

Thanks for the tip!

your #container div is still listed as width: 650; you need to change that to 610.

Tha.Riddla,

I hadn't noticed that width, I fixed it, but now my side column is crapped out below the main "event" id. Even though the menu and main widths, equal 610.

Thoughts?

Best way to check it comment out the #box properties and see what happens. It looks too big anyway so make sure all the math adds up with borders/padding/widths/margins etc

So, After relooking at all the numbers, the math actually works out...

My header image, though the width is 610px, I have 20px outside border of white on it... so 20px border, image, 20px border. for 650.

Everything is perfect in firefox, just not IE, I've tried to implement a hack, but didn't work., IE just read right over it.

Anyone else have any new ideas? I'd really appreciate it, as I've never had a block this bad in css and IE.

So, After relooking at all the numbers, the math actually works out...

My header image, though the width is 610px, I have 20px outside border of white on it... so 20px border, image, 20px border. for 650.

Everything is perfect in firefox, just not IE, I've tried to implement a hack, but didn't work., IE just read right over it.

Anyone else have any new ideas? I'd really appreciate it, as I've never had a block this bad in css and IE.