PDA

View Full Version : Showing up in Firefox but not in IE



spawnkill
Mar 27th, 2009, 02:18 AM
Hi, I own a website here (http://www.spawnkill.com) and I have been unable to figure out a little blip in my website's coding error that is making the little button/tabs on the top of the homepage to only appear in FF but meanwhile nothing displays up there in IE.

Any ideas? :/

CFMaBiSmAd
Mar 27th, 2009, 02:45 AM
You have 66 HTML markup errors. Fix those first - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.spawnkill.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

spawnkill
Mar 27th, 2009, 03:06 AM
I fixed the ones I could figure out (33 of them, half... Heh) but I don't think any of those errors it displayed would affect these images not showing up... And all the things it said were wrong were just basically not having alt="" tags on several images that were already displaying properly. v_v

Fou-Lu
Mar 27th, 2009, 03:08 AM
Moving to HTML/CSS forum.

Excavator
Mar 27th, 2009, 04:11 AM
Hello spawnkill,
You have #menu enclosed in #header which is set at height: 130px;
If you put a background color on #header, you'll see that menu is dropping outside of that. Like this -

#header {
width: 920px;
height: 130px;
margin: 0px auto;
background: #f00 url(images/bg03.jpg) no-repeat left top;
}

If you remove the height:130px; and clear the float, then #header can expand to enclose #menu. Like this -

#header {
width: 920px;
margin: 0px auto;
overflow: auto;
background: #f00 url(images/bg03.jpg) no-repeat left top;
}

That might be enough to fix it right there. I'm not looking at this in IE6 (you should specify which version you're talking about) right now.

spawnkill
Mar 27th, 2009, 04:35 AM
Huh! That did get it to show in both browsers, and yes it is IE6. Now only one small thing, it moved up into the background area instead of sitting on the white portion to look like tabs of some sort like it did previously...

Thank you for such a quick response!

Excavator
Mar 27th, 2009, 04:46 AM
You could put a background color on #menu and use margin to move it down a bit... like this -

#menu {
float: left;
margin: 20px 0px 0px 0px;
padding: 5px 0 0 0;
background: #fff;}

I think what it really needs is to be at the top of #page, instead of the bottom of #header. That way it's not pushing #sidebar down.

Have you seen the errors the validator finds on your page? See the links about validating in my sig below.


...

spawnkill
Mar 27th, 2009, 05:04 AM
Gah I am playing with the padding and such but no such luck, it looks funky still... Also, why do those | separators show between this menu? I have the style set to none for the menu, if that means anything.

Excavator
Mar 27th, 2009, 05:09 AM
Gah I am playing with the padding and such but no such luck, it looks funky still... Also, why do those | separators show between this menu? I have the style set to none for the menu, if that means anything.

Keep playing with padding and margin... have you tried setting a specific width for your ul?

| is loaded here -

#menu a {
padding: 0px 20px 0px 22px;
background: url(images/img02.gif) no-repeat left center;
text-decoration: none;

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #7B7B7B;
}

spawnkill
Mar 27th, 2009, 05:46 AM
I played with the padding and floats and whosamajiggies and got it to look basically how I wanted, I couldn't figure out what you mentioned about the menu aligning with the sidebar (which would look better since it sort of breaks the bg) but I am not gunna push it, it'll probably break.

Thank you.

Excavator
Mar 27th, 2009, 10:43 AM
I played with the padding and floats and whosamajiggies and got it to look basically how I wanted, I couldn't figure out what you mentioned about the menu aligning with the sidebar (which would look better since it sort of breaks the bg) but I am not gunna push it, it'll probably break.

Thank you.

Because #header is extending to enclose #menu, it's pushing #sidebar down.
I still think it would work better to move #menu inside page.
This will get your #sidebar moved back up too, adjust that top margin in red to get it where you want -

/* Sidebar */

#sidebar {
float: right;
width: 180px;
margin: -50px 0 0 0;
padding: 50px 10px 0px 0px;
}

#sidebar ul {
margin: 0px;
padding: 0px;
list-style: none;
}