Hi, I am using CSS to position objects (<SPAN> and <DIV> tags) on my webpage, which is working great on regular computer monitors, when I view the same page on a wide screen laptop monitor, one of my objects (<span id="logo">) changes position and is placed about 5 pixels below where it suppose to be. If I adjust the position to compensate for these five pixels, then the object is correctly positioned on the widescreen monitor but is five pixels off on the regular monitors. When I only use HTML TABLES with no CSS positioning, I do not grt this problem. Below are the CSS and the HTML code. Thank you for your help. <htm> <body> <div id="container"> <div style="width: 1100px;"> <span id="google"> <FORM method="GET" action="http://www.google.com/search"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <A HREF="http://www.google.com"> <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" width="80" height="20"> </A> <INPUT TYPE="text" name="q" size="25" maxlength="255" value=""> <INPUT type="submit" name="btnG" value="Search"> <font size=-1> <input type="hidden" name="domains" value="www.xxx.com"><br><br> <input type="radio" name="sitesearch" value=""> Web <input type="radio" name="sitesearch" value="www.xxx.com" checked>xxx<br> </font> </FORM> </span> <span id="logo2_top"> <em>XXX</em> </span> <span id="logo"> XXXX </span> </div> </div> </body> </html> //====================================== // CSS //====================================== BODY { color: black; font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url('../images/background5.jpg'); } #container { margin-left: auto; margin-right: auto; text-align: center; top:0px; left:0px; width: 100%; } #google { width: 375px; height: 80px; text-align: left; background-image: url('../images/background.jpg'); position: relative; top:-4px; left:0px; } #logo2_top { text-align: center; width: 215px; height: 80px; background-image: url('../images/background.jpg'); position: relative; top:-4px; left:0px; vertical-align: top; font-family: script; font-weight: bolder; font-size: 30px; color:#660000; } #logo { width: 375px; height: 80px; text-align: right; background-image: url('../images/background.jpg'); position: relative; top:-50px; left:0px; } Code (markup):
Well, I can't tell for certain without seeing the live page (because I'm assuming this is a way stripped down version) - but I'm fairly certain that: All those SPAN should probably be DIV. The relative positioning should either be unneeded or handled as margins. You have a severe case of classitus and divitus - AND invalid markup.... and from what I'm seeing there is NO reason to be calling that 'background.jpg' more than once. (you seem to do so three times) Do you have a picture of what it's SUPPOSED to look like that is ... meaningful?
Thank you for your postings. I am new to CSS, can you please elaborate on "You have a severe case of classitus and divitus ", you also mentioned that I have invalid markup. I tried using DIVs instead of SPANs but that did not fix the problem. I attached the complete page code with images and CSS.
Still not much help because as placeholders, the layout looks like total gibberish... Need the images too. What I can say for certain is that this: <div style="width: 1100px;"> should be removed and applied to #container. all those in a row - good indication of doing something WRONG once CSS is in the picture. all those double breaks - should probably be wrapping paragraphs and NOT double breaks. Marquee tag should not be used in modern websites... Proprietary tag ANYWAYS so. ALL those span should probably be DIV, IF they should even be there at all (which I doubt)... spans are for inline level elements, but you are using them to wrap things that have the behavior of block level - so use a block level element. That bottom table should be a list, not a table..... and a div nesting a table nesting a div nesting a table nesting a div is a total /FAIL/ since NONE of those are adding any visual elements to the page. I'd do a quick rewrite for you, but the completely meaningless class/id names means I don't know what's what, much less where it's supposed to go. Do you have a image of what it's SUPPOSED to look like? (because I'm fairly certain what I'm seeing ain't it) Oh, and if you are starting out with CSS, all of the above can be attributed to how you learned HTML... Not your fault, don't feel bad about it or take it personally - you've got a learning curve ahead of you. The best place to start out is to completely forget anything you learned about designing a page in HTML - because with CSS... HTML is no longer used for anything 'presentational' - aka what the page will look like. You start out with minimalist semantic markup... markup headers with header tags, markup paragraphs as paragraphs (and don't blow paragraphs on things that aren't paragraphs) - if it's a block of content - like your #content - that's a BLOCK, use a div, not a span. Do not use tags like CENTER, FONT, etc. Do not waste time putting tables around single elements... Do not add another containing div before asking yourself "can this be applied to the parent or child element?" Once you learn to separate 'presentation' from 'content' you'll find it's faster, cleaner and simpler... Just getting over the hump of learning the CSS properties is the stone cold *****.
deathshadow, thank you ofr your reply, and the tips. I will redesign the page using the points you indicating. Thank you for the offer to rewrite, but that is not needed, I think I need to learn how to do this on my own . As for the images they are included in the zip file, they are the same images I am using on the page, these are blank images not placeholders, the page in the zip file looks ok on my computer. I will attach an image of the page to this post, this image looks ok on this computer, I do not have access to a widescreen now, I will repost the image as it shows on the widescreen, later this evening.
Hey Mo, if you stick around here and watch deathshadow rewrite other people's pages, you'll learn a lot. If you do take him up on his offer, he does explain every line-- why he does this that way etc. Same would go for Dan Schulz, VimF, soulscratch, and a few others. This forum is where I learned a lot (over the months and months and months...)
Thanks Stomme poes, I will take your word for it, if the offer still valid that will be greate, but only to learn how to do it right.
the attached screen shot shows the way the page looks on the widescreen at any resolution. notice the top righthande side of the page.