I am working on a website right now. I have no idea what is going on. I am hoping that someone can help me out. The test site is www.vonstorm.com/php On a normal screen everything looks great and perfect. See the following print screen: Pay attention to the tabs at the top of the page www.spectacularstuff.com/testing/vonstorm-printscreen1024x768.jpg However On a wide screen computer no matter what resolution this is set at the right most part of the tabs have disappeared?? See the following print screen: www.spectacularstuff.com/testing/vonstorm-printscreen-1920x1200-wide.jpg This only happens in IE that I can tell. I look at it in Firefox and I see the image. Can someone help with why this is? I am not that great at CSS and cannot see anything wrong with the way the CSS is programmed. Any help would greatly be appreciated. Thanks
Argh don't have time to look through your CSS in detail as I'd be late for work At a first guess though, IE is sometimes weird with tables, in that it'll make them smaller when the available space gets larger. Try putting a spacer graphic in the table that's the width of your min. screen res and see what happens. Also I recommend the webmaster tools if you develop in firefox as they'll help you see what's going on - they're linked in my blog. Sorry if this post wasn't useful, it's kinda rushed!!
Well, I kind of got the jist of it. I think the mistake is coming in that I am using ID's instead of classes for the tabs. I am not sure but if I go to www.experts-exchange.com and look at their tabs... they are using the same script that I am however I see theirs just fine.... ?? I am going to play with it tonight. I have never seen this happen before. I can see the right image for the tab no problem in anything else but IE. The problem is everytime I turn the main div into a class I lose the images... I will figure it out one of these times.. Nobody else seems to see what I see.... weird
Use IDs where you need to identify elements (e.g. if you want to manipulate them with JS, highlight selected menu items, etc). For everything else, it is better to use classes. J.D.
well, I originally had classes in there and someone told me to put those specifically as IDs for one reason or another. I have figured out the problem. Well, That is what was causing me to not be able to see the right most /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header a span {float:none;} /* End IE5-Mac hack */ Code (markup): The issue now is.... I cannot have the above in there whether it is a class or an id. I have tried both. If I remove it, the tabs do not act like an image tab. It acts link just an image... it does not change your mouse when you mouseover... that is what that span was for... is there a better way to perform this?
Remove those span's and make your <a>'s as blocks (IE doesn't recognize hover on anything but <a>'s). J.D.
Okay I went around the problem The strange thing is it was only happening to my computer. Nobody else's computer could see this.... So then I would say that it has to be a configuration on my computer... Well everythingg was checked, double checked and triple checked and then checkede again. Then I set everything back to default to no avail. However when I went into the code on commented out the above line... that brought back the image so I could see a full tab however then the link did not act like a link.... You did not see the hand when you hovered over it... You saw the cursor as if you were hovering over selectable text. So then I just told CSS to show the hand when people hover over and it works fine now. The spans are needed in there to spread the anchor tag across the whole tab. Otherwise only the text link would be clickable.