Hi there, I've got a problem with a page on my website. One of the side advertisements which is meant to be in the top right corner of the page doesn't stay there - it seems to be forced to the very bottom of the page. However this problem is only evident in Internet Explorer - in Firefox the banner is in the correct position. I've looked at the code and couldn't find anything wrong with it, it's really confusing me and I would appreciate any help. This is the link to the problem page: http://www.cristianoronaldopics.com/cristiano-ronaldo-myspace-layouts.html Thanks for any help. Matt
This seems like a Box Model problem. IE renders padding/margins differently than Firefox. Here's a wikipedia article on the bug. Make sure you are using a doctype that won't send IE into quirk mode (wikipedia again). Hope that helps!
Thanks for the reply, reps given The thing is, I don't understand why this page messes up when its exactly the same as other pages on my website (which don't mess up). Matt
No-one able to help then reps are available for any helpful advice Really annoying why it seems to get forced to the bottom of the page...I might just try widening the whole website because it's annoying me.
First off, XHTML 1.1 is for web applications, and has poor cross-browser support, so drop back to XHTML 1.0 strict. Second, you've got 28 validation errors, meaning your layout could be relying on error handling for it's appearance - probably why it doesn't look all to great in Opera or Safari either. You've got extra DIV's around UL's that could just be styled directly.. You appear to be using a DIV (Buffer to content area?) for spacing instead of margin-bottom. Multiple H1's on the page - H1's as the topmost header should only appear once. H1's wrapped in DIV's for no fathomable reason. double line breaks inside paragraphs - and a break right after opening a paragraph; Total /FAIL, again that's what margins and padding are for. numbered list using double breaks - that's what a ordered list is for. It's got enough problems that as I often say - chuck it and start over... But then again it's for a site about styling myspace pages - which given the total vomit the HTML in myspace pages are in the first place it's kind of going with the flow.
Lol okay, thanks a lot Deathshadow. Regarding the multiple use of H1 tags - I thought by using some extra h1 and h2 tags (wrapped in div's) it would make the search engines think that the titles are important. Would I be wrong in presuming this? Thanks again for your help. Matt
I've made some changes and have uploaded the page again, again it appears fine in Firefox but in IE the advert is pushed to the bottom. http://www.cristianoronaldopics.com/cristiano-ronaldo-myspace-layouts.html There are some things recommended by deathshadow above which I wasn't sure how to implement; How to get rid of <li> tags and use a div for this instead? How to get rid of <em> tags and use a div for this instead? (italic text) Thanks for any help offered. Matt
Well, first, there's no reason to wrap them in DIV's unless you are applying styling that cannot be applied directly. It's wasted code and more stuff for the search engines to wade through just to get to your headers. Second, headers are to indicate the flow of the page - The header 1 should be what the page is... I usually mirror the contents of my TITLE declaration, appending the current page (home, information, products) to the end of it inside STRONG tags. (marking that sub-part as more important). Header1 is the topmost header, it's usually best to only use it once - all other headers on the page should be H2 or lower. You SHOULD try to use the lower headers as you would if it was a print document. H3 goes inside sections started with H2's, H4's go inside sections that start with H3's, etc, etc. YES, using headers will let search engines 'see' the page better - but only if you use them by priority. For DIV's, unless you have exhausted all ways of styling the current tag, they should be restricted to grouping tags by section - which is how one applies spacing without resorting to things like break tags or spacer gifs. I would also suggest using meaningful classnames that say WHAT the content is, NOT how it appears. "middle-column-box-full-standard" is a /fail/ on both length and descriptiveness. The first 'article' on your page isn't too bad, downgrade it to a H2, downgrade the h2 to a H3.... but you've got a major problem, the anchor AROUND the H2 - should be the other way around. H2 is a block level element, putting it inside a inline-level is invalid. (and remember block and inline LEVEL is NOT THE SAME THING as display:block/inline) Your google ad - is that a paragraph? NO it is NOT... so why are you styling it as a paragraph... and again if you are going to use class="center" you might as well have used align="center" - it should probably be a DIV with the class "google_ad" You've got four images, are those a paragraph? No, they are not... and you are resorting to and BR to space them when you should be using MARGINS and PADDING. Because the H3 is part of the images 'group' I would wrap them both in a DIV called "layout_images". You are also inlining border-style:none; - I've rarely ever wanted a border around images, and when I do usually I want to style it - so just declare no image borders globally in the CSS instead of stating it each and every time you use an image. The 'setup instructions' looks to be kin to the first header, NOT a child, so it should have a H2... which should be INSIDE the same container, not inside the container of the one before it... Up next is a ordered list, so use an ORDERED LIST. OL/LI. You've got a bunch of subsections here, one for each layout - so these should be each wrapped in a DIV, each with it's own header - since our parent wrapper starts with a H2, these should be H3's. There's only one image inside each of these groups, so we don't even need a class on those. You are using a XHTML doctype, so all tags should be in lower case - TEXTAREA is invalid XHTML. You've also got no quotes around the class - which we shouldn't need since inside this DIV there's only going to be one textarea. I wouldn't bother setting the dimensions in the HTML either, since you could do it four times here, or once in the CSS - I know which one is made of GOD and WIN in my book. and the content of the first textarea appears to be invalid CSS since there's a comment that isn't marked as a comment... instead it appears to be attempting to apply invalid styling to the 'note' tag - there is no note tag. Looking at it, you seem to be changing what side you want the image to be on (which is broken in Opera) for each item. To facilitate that rather than styling the images directly, we can just add a second class "even" to every other layout section - so if in the future you want to distingiush them in any other way like alternating floats, alternating backgrounds, you don't have to touch the HTML to do it. So your entire content area I'd code something like this - this is really all the HTML you should have for that, in fact some would argue I've got extra container DIVs in there still. <div class="article"> <h2>Cristiano Ronaldo Myspace Layouts</h2> <p> <strong>Cristiano Ronaldo Myspace layouts</strong> available to download and use for free. </p><p> Click on an image below to download the Myspace layout code text. Full instructions to install the <strong>Cristiano Ronaldo Myspace layouts</strong> are listed below. </p> <div class="google_ad"> <script type="text/javascript"><!-- google_ad_client = "pub-9390674782878254"; google_ad_width = 234; google_ad_height = 60; google_ad_format = "234x60_as"; google_ad_type = "text_image"; //2007-05-08: ronaldo google_ad_channel = "0477017194"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "78B027"; google_color_text = "666666"; google_color_url = "78B027"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="layout_images"> <h3><a href="cristiano-ronaldo-myspace-layouts.html" class="greenlink"> Cristiano Ronaldo Myspace Layouts </a></h3> <a href="#cristiano-ronaldo-myspace-layout-1"> <img src="cristiano_ronaldo_myspace_layout_1.jpg" alt="cristiano ronaldo myspace layout 1" /> </a><a href="#cristiano-ronaldo-myspace-layout-2"> <img src="cristiano_ronaldo_myspace_layout_2.jpg" alt="cristiano ronaldo myspace layout 2" /> </a><a href="#cristiano-ronaldo-myspace-layout-3"> <img src="cristiano_ronaldo_myspace_layout_3.jpg" alt="cristiano ronaldo myspace layout 3" /> </a><a href="#cristiano-ronaldo-myspace-layout-4"> <img src="cristiano_ronaldo_myspace_layout_4.jpg" alt="cristiano ronaldo myspace layout 4" /> </a> </div> </div> <div class="article"> <h2>Cristiano Ronaldo Myspace Layout Set-Up Instructions</h2> <p>Follow our simple instructions to set up the Cristiano Ronaldo Myspace Layouts on to your own profile:</p> <ol> <li> Choose an image above which will be used as your Myspace layout. Click on the image to view the text code for the layout. </li><li> Highlight this text with your mouse and then right click and select copy. </li><li> Load up the Myspace website and then log in to your own account. </li><li> Select *** THE EDIT PROFILE OPTION ON YOUR MYSPACE PAGE *** </li><li> Right click and paste the text code from your chosen Cristiano Ronaldo Myspace layout in step 1/2. </li><li> Save the changes to your Myspace profile and then select the option to view your profile to check the new layout has been installed correctly. </li> </ol> <div class="article_layout"> <a id="cristiano-ronaldo-myspace-layout-1"></a> <h3>Cristiano Ronaldo Myspace Layout 1</h3> <img src="cristiano-ronaldo-myspace-layouts-1.jpg" alt="Cristiano Ronaldo News" /> <textarea readOnly onclick="this.select()"> textarea content here </textarea> </div> <div class="article_layout even"> <a id="cristiano-ronaldo-myspace-layout-2"></a> <h3>Cristiano Ronaldo Myspace Layout 2</h3> <img src="cristiano-ronaldo-myspace-layouts-2.jpg" alt="Cristiano Ronaldo News" /> <textarea readOnly onclick="this.select()"> textarea content here </textarea> </div> <div class="article_layout"> <a id="cristiano-ronaldo-myspace-layout-3"></a> <h3>Cristiano Ronaldo Myspace Layout 3</h3> <img src="cristiano-ronaldo-myspace-layouts-3.jpg" alt="Cristiano Ronaldo News" /> <textarea readOnly onclick="this.select()"> textarea content here </textarea> </div> <div class="article_layout"> <a id="cristiano-ronaldo-myspace-layout-4"></a> <h3>Cristiano Ronaldo Myspace Layout 4</h3> <img src="cristiano-ronaldo-myspace-layouts-4.jpg" alt="Cristiano Ronaldo News" /> <textarea readOnly onclick="this.select()"> textarea content here </textarea> </div> </div> Code (markup): Everything else, spacing between elements, FAC, etc, goes in the CSS. Knocks about 400 bytes off your code, and makes it cleaner. (which I use about 200 bytes worth of that to put FORMATTING in) Good rule of thumb, if it looks like a header, make it a header... ask yourself is this a sibling or a child of the previous header. Sibling make it the same, child make it one less... and headers usually top a section, if it's a section, wrap the ENTIRE section in a DIV... Always ask yourself "Do I really need a class here, or can I style it off the parent container?" - if it's a unique tag that's only going to occur once inside the container, or that all of them that appear inside the container are going to be styled the same - don't waste a class. Also ask 'are these all the same' - too often you see people do: <div class="justified_header"<h2>Header</h2></div> <p class="justified_content">Some text</p> <p class="justified_content">Some text</p> <p class="justified_content">Some text</p> <p class="justified_content">Some text</p> <p class="justified_content">Some text</p> When that should probably just be: <div class="content_box"> <h2>Header</h2> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> </div> and as a rule of thumb, if you are using multiple <BR> and/or to put spacing between elements, you are probably doing something wrong.
Thanks for the great reply again deathshadow, didn't expect such a thorough and helpful response - thank you very much. Will give you some reps when I can, and will try and change the code too. Thanks again. Matt