unordered image list IE7 problem
newbie
Posted: Thu, 2008-08-28 18:23
Alright, this little problem has shaved off hours of my life expentancy and caused great amounts of hair loss. I've searched through countless forums and tutorials including the ones on this site with no luck on finding the solution... maybe you can help me.
I'm trying to setup an unordered list with images instead of text and managed to get it looking ok for firefox and thought I was done, but IE has just slapped me in the face (again). I'll go ahead and post a bit of code at the bottom, but you should be able to check out the source with no problem (its all on one page... I haven't imported or included any other documents).
www.screenworksonline.com
Check it out if you have a free minute... I'm open for suggestions. The list is located within the "content" div.
HTML startup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Screen Works Online - ONE-STOP CUSTOM CORPORATE APPAREL & PROMOTIONAL PRODUCTS SOURCE</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css">
CSS
<style type="text/css">
html
{
margin:0 auto;
padding:0;
background-image: url(..//images/screenworks-background.jpg);
background-repeat: repeat;
background-position: center;
}
div#wrapper
{
margin:0;
padding:0;
width:975;
text-align:center;
}
div#content
{
width:975px;
height:394;
text-align:center;
margin:0 auto;
}
div#productleftfill
{
float:left;
}
div#menuitems
{
float:left;
z-index:30;
}
div#menuitems ul, li
{
margin:0;
padding:0;
font:bold 12px Arial;
font-size:0;
}
div#menuitems li a
{
margin:0;
padding:0;
list-style:none;
text-indent:0;
line-height:0;
width:174;
background:#000000;
color:#FFFFFF;
text-align:center;
text-decoration:none;
}
div#menuitems li a:hover
{
color:#60c43d;
}
div#rightfill
{
float:left;
}
div#ajaxframe
{
position:
relative;
float:right;
width:767;
height:394;
}
div#product
{
width:208px;
clear:left;
float:left;
}
div#footertop
{
clear:both;
}
</style>
HTML (just the section of the div containing the <ul>)
<div id="content"
><div id="productleftfill"
><img src="/images/menu_left_fill.jpg" width="22" height="266" border="0" alt=""
></div
><div id="menuitems"
><ul id="menu"
><li
><img src="/images/menu_top_fill.jpg" width="174" height="17" border="0" alt=""
></li
><li
><a href="#"
onmouseover="rollover('menuScreen','item_screenprinting_on.jpg');"
onmouseout="rollover('menuScreen','item_screenprinting_off.jpg');"
><img src="/images/item_screenprinting_off.jpg" name="menuScreen" width="174" height="22" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuEmbroidery','item_embroidery_on.jpg');"
onmouseout="rollover('menuEmbroidery','item_embroidery_off.jpg');"
><img src="/images/item_embroidery_off.jpg" name="menuEmbroidery" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuHats','item_hats_custom_on.jpg');"
onmouseout="rollover('menuHats','item_hats_custom_off.jpg');"
><img src="/images/item_hats_custom_off.jpg" name="menuHats" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuCut','item_cut_custom_on.jpg');"
onmouseout="rollover('menuCut','item_cut_custom_off.jpg');"
><img src="/images/item_cut_custom_off.jpg" name="menuCut" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuKnitted','item_knitted_on.jpg');"
onmouseout="rollover('menuKnitted','item_knitted_off.jpg');"
><img src="/images/item_knitted_off.jpg" name="menuKnitted" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuFibre','item_fibre_on.jpg');"
onmouseout="rollover('menuFibre','item_fibre_off.jpg');"
><img src="/images/item_fibre_off.jpg" name="menuFibre" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuGraphic','item_graphic_on.jpg');"
onmouseout="rollover('menuGraphic','item_graphic_off.jpg');"
><img src="/images/item_graphic_off.jpg" name="menuGraphic" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuDye','item_dye_custom_on.jpg');"
onmouseout="rollover('menuDye','item_dye_custom_off.jpg');"
><img src="/images/item_dye_custom_off.jpg" name="menuDye" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuPackage','item_package_on.jpg');"
onmouseout="rollover('menuPackage','item_package_off.jpg');"
><img src="/images/item_package_off.jpg" name="menuPackage" width="174" height="24" border="0" alt=""
></a
></li
><li
><a href="#"
onmouseover="rollover('menuDecal','item_decal_on.jpg');"
onmouseout="rollover('menuDecal','item_decal_off.jpg');"
><img src="/images/item_decal_off.jpg" name="menuDecal" width="174" height="23" border="0" alt=""
></a
></li
><li
><img src="/images/menuBottom_fill.jpg" width="174" height="12" border="0" alt=""
></li
></ul
></div
>
As I said, you will get a much better view from the source on the page. This will eventually become a drop-down menu, but until I can fix this layout problem I'm a bit stuck. I've tried to follow all the rules and regulations of posting... hope I did 
.
Any help is much appreciated!!
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
The first and most important
Posted: Thu, 2008-08-28 20:05
The first and most important rule is to write valid html! And you certainly have not done that. You've used an xhtml DTD but the tag you use to import the stylesheet isn't ended properly with a "\"! And that's just a start. 99 html errors! Your CSS has errors, too.
Get your html and CSS validating. That's our first "rule" and it is vital to follow it.
Computers are literal minded beasties - they can only do what you tell them and then they can only understand what you tell them if you follow their rules exactly. That's just the nature of the beast.
You shouldn't be using a transitional doctype for a new page, either.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
newbie
Posts: 9
Joined: 2008-07-06
Alright, thats fair
Posted: Thu, 2008-08-28 21:14
Alright, thats fair enough... I've attempted to validate my page on W3C a couple of times, but all that comes up (the 99 errors) are the beginning tags and end tags that "are not there" but the problem is they are there... they just show up for some other reason thats beyond me. Maybe its because I didn't "self close" the tag (../>..). Maybe its because instead of ending a tag on that line I end it on the next line then start the next tag... this is because it has fixed a few errors for me in the past, hence I write that way all the time now.
That might not be the case... maybe I missed something in an early closing tag or something? I'm not sure... I'm new to CSS layouts and was hoping someone could clear this up as well as my layout issue (in my experience, 80% of all pages don't validate on W3C but still work)... that doesn't mean I don't want to learn the proper way. All of my knowledge of web dev is self taught from forums and tutorials, so I have no proper learning experience.
I don't have an include for my CSS file, I have the CSS directly on the page for now so I can get it working before I break it up into the different sections. I used the transitional doctype because I'm still learning this method of site creation.
I understand noone wants to just pick up someone elses project for them, but I can't seem to find the solution to this very small problem on my own. All I ask is if someone knows my problem maybe they can help me understand how to fix it... If in that process I learn how to properly write out my html or css I'm that much more happy.
Maybe you can help me out and point out what errors are really affecting the page... I'll do my best to research and fix these errors, but like I said, I have other people to learn from not proper statments.
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
Fathermerrin wrote:Alright,
Posted: Thu, 2008-08-28 21:15
Well no, they aren't there. Take the second one:
You are specifying xhtml in your Doctype declaration so the IMG tag must end with "/>" and you've just closed it with ">"
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
newbie
Posts: 9
Joined: 2008-07-06
ah I see... does that apply
Posted: Thu, 2008-08-28 21:22
Alright I've added that to all of my images... easy fix. working on the 4 errors left.
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
... continued from previous
Posted: Thu, 2008-08-28 21:23
... continued from previous post, which I can't edit for some reason...
It looks like most of your other errors are that kind of thing, too. You have to understand how the version you've chosen of html works. IMG tags closed with ?>" work in html, but xhtml requires "/>". That's true for all of the self closing tags like the IMG, LINK, and META tags (upper case here merely to distinguish - xhtml requires all tags in lower case.)
Do yourself a favour and get the "Html Validator" extension for Firefox. Then when you view the page source you'll have a button that will clean up all those errors for you in about two seconds. Then copy and paste them into the source page.
CSS errors must be cleaned up too - some will even cause a browser to ignore the rest of the CSS and really confuse you.
Learning to write valid html and CSS is not an option, it is an absolutely essential skill which you must have to be successful at web developement.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
newbie
Posts: 9
Joined: 2008-07-06
alright the html
Posted: Thu, 2008-08-28 21:25
alright the html validates... very useful for having done such a simple change apparently. on to working on the CSS.
newbie
Posts: 9
Joined: 2008-07-06
CSS
Posted: Thu, 2008-08-28 22:08
Alright, both my HTML and my CSS are validated, but my problem still persists... any ideas on how to go about fixing it?
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
Well at this point my
Posted: Thu, 2008-08-28 22:26
Well at this point my problem is that I basically don't understand what the problem with the page is from your explanation and from looking at the page. Can you put it more clearly?
I could make more criticisms of the page's html, but at this point, you having been nice enough to follow my validation advice, it would be nice to help with the actual problem.
Although, you still have some errors in your CSS - it's important to get those fixed too. I've seen the darndest things happen as a result of seemingly innocuous CSS errors.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
Hmm -- just noticed that
Posted: Thu, 2008-08-28 22:36
Hmm -- just noticed that your problem seems to be with IE - also I see you are using floats for positioning (which is generally the best way to do it) . If so you need to be clear on the way IE handles floats because it doesn't do it in the standard way, it uses it's own non-standard method called "haslayout". Basically if a container has this magical property of "haslayout" it will expand to contain it's floated children, even though the CSS standard says it should't.
So if you don't want a containing element to expand to enclose it's floats you have to make sure the container doesn't have this strange "haslayout" property. Try googling on "haslayout" and seeing if you can understand the explanations. "Haslayout" isn't in the CSS spec, it's Microsoft's own little invention.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
newbie
Posts: 9
Joined: 2008-07-06
hasLayout
Posted: Fri, 2008-08-29 01:49
It worked!
After looking into the hasLayout properties I managed to find how to fix it for IE... a simple addition of a conditional statement in the CSS (usualy don't use them but this is an exception). with the line "Display:Inline-Block;" solved it all
I owe you one, you definitly have some cool points in my book now
...think I still have alittle hair left
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
Well I'm glad I finally
Posted: Fri, 2008-08-29 02:13
Well I'm glad I finally stumbled upon a suggestion that helped, anyway. Usually I chastize folks about invalid html and even when they don't get mad at me and fix that they still often have the same problem, and someone with real brains comes along and says exactly what to do to fix the problem.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse