http://www.geocities.com/dbbmagic/LBP.html I am helping design that website in CSS. We have run into a little problem however...if you open the link in FireFox, it looks a bit jumbled. The links button is below the main, bar is stretched, etc. IF you open it in IE, it looks fine. Is there a way to correct this?
First of all, make an appart CSS file instead of putting it all into your HTML, I already see the problem, you didn't code it well for FF, this site is made for IE. Try looking up some FF CSS. What I mostley do is putting Float: left; Clear: both; In every dock that holds a whole part together. It means it will be on the left, but the clear: both; makes it to align correctly under the div above. Maybe you don't understand this, then read some positioning tuts here www.w3.org
From what I can see the total width of the menus are larger than the #navi. 116px width + 1px margin + 2px border * 7 menu buttons = 833 px wide, whilst the #navi div is only 824 px wide. Anyway, it's often better to have a few basic fixed-width's and then use relative widths inhereting from those values. Like for example having the container div fixed width and then having menus relative.
Well its also broken in Opera and Safari (at all) so I think its safe to say it doesn't work. This is a fair wack of your problem. Font is an old tag and should never be used, your color codes (e.g '000000') should be like '#000000' or better yet, '#000'. Paragraphs in bold tags, all sorts of crap which just stops your page rendering in Safari. And why the fuck do you have other HTML tags in your <style> tag? This is not even real HTML, this is barely even plain 'ol ML. I mean, this code makes Dreamweaver look god-like, and you wonder why its not working? F**k. Looks like it. Thats called stupidity. Always test in: IE6,IE7,Opera, Safari and Firefox. Ummm, no such thing. Except for stupid invalid properties prepended with '-moz'.
<!-- Begin Wrapper --> <div id="wrapper"> Code (markup): No ****, really? I had no idea that's what an opening tag named wrapper did. Your close comments aren't QUITE as bad, though their placement after could cause rendering bugs in IE. You should read this: http://www.ibm.com/developerworks/linux/library/l-clear-code/ It might help explain commenting without sounding Carlos Mencia HTML grey. Apart from that, Blueparukia's comments are pretty much spot on - though a bit harsh since it's apparant you're nubes. (even I TRY to take it easy on the nubes) If I were to write that, it would go as follows: First, you have a fixed width layout, so you need a container. I call my top container ... well, container. Doesn't matter, you called it wrapper, same difference really. Next you have your header - which is a presentational image being used instead of the site title. I consider this presentational, and a heading - therin it should be an H1 tag. I use something called an 'image replacement technique' which uses an empty span placed over the H1 text. This gives us 'image off' graceful degredation. Being that it's called on every page (most likely at least) putting it in the CSS is one more element to save a few bits of bandwidth. Next is the menu. A menu is a list, so it should be marked up as a list. Gives us more than enough containers to mark it up too. Content DIV - because it's in the content area that image could be considered content, I see no reason to move it to the CSS if it's only called on this one page. Images should have alt text, otherwise they are useless to people browsing with images off, on less capable browsers, or using accessability devices. The footer is pretty much what you have too. Only real difference is like everywhere else, comment placement. So my rewrite of the HTML would look something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> <title> Home - LittleBigPlanet Creators Group </title> </head><body> <div id="container"> <h1> LittleBigPlanet <span></span> </h1> <ul id="mainMenu"> <li><a href="#">Main</a></li> <li><a href="#">Forums</a></li> <li><a href="">Teams</a></li> <li><a href="">Member Info</a></li> <li><a href="">Hints</a></li> <li><a href="">About us</a></li> <li><a href="">Links</a></li> </ul> <div id="content"> <img src="lbpcgga9bl5.png" alt="Little Big Planet - Creators Group" /> <p>Put your stuff here:</p> <!-- #content --></div> <div id="footer"> Copyright © 2008 LittleBigPlanet Creators Group <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): As to the CSS - putting 5 padding and 2 margin on EVERY tag makes little or no sense, and is probably part of what's biting you in the ass. If you're gonna target everything, it should be to ZERO them so you have an even baseline. One of your bigger problems is you went nuts declaring widths. If you have a perfectly good container with a width set on it, you don't need to waste time declaring widths from that point forward unless the element is a fixed narrower width, or is absolute positioned (which should be reserved for use inside fixed-height containers that are in flow so flow is preserved). So the CSS would be something like this: * { padding:0; margin:0; } a { color:#F91270; text-decoration:none; font-weight:bold; } a:visited { color:#F91270; text-decoration:underline; } a:hover, a:active { color:#000; text-decoration:underline; } body { text-align:center; /* center #container in IE 5.x */ font:normal 12px/14px arial,helvetica,sans-serif; color:#F91270; background:#58E858 url(http://www.geocities.com/dbbmagic/lbpbg1.jpg) repeat-x; } #container { width: 922px; margin: 0 auto; } h1 { height:192px; margin: 10px 0px 5px; position:relative; font:bold 64px/192px sans-serif; color:#860; background:#FFF; border:1px solid #2EBCB8; } h1 span { position:absolute; top:0; left:0; width:920px; height:192px; background:url(http://www.geocities.com/dbbmagic/logostor.jpg) center center no-repeat; } #mainMenu { list-style:none; /* no bullets */ margin:5px 0; padding:15px; color:#F91270; background:#CCC; border:1px solid #2EBCB8; } #mainMenu li { display:inline; /* put them all on one line */ } #mainMenu a { padding:0 8px; } #content { margin-bottom:5px; padding:10px; color:#F91270; background: FFFFFF; border:1px solid #2EBCB8; } #footer { padding: 10px; color: #F91270; background: #ccc; border: 1px solid #2EBCB8; } Code (markup): Mind you, this is untested... but should be closer to what you are trying to do. (Mostly I just cleaned up what you had and tossed in a couple of my standard tricks)
Well now my ITS class has finally started Dreamweaver I am cleaning up ~25 people's code a day in a 70 minute period, and I am definitely not as patient as you, I have the tendency to swear under my breath/loudly when my teacher starts showing us how (not to) make a site with tables and make buttons (with text) in Fireworks This web developing business is turning me into an old grouch before I've hit 18 :s Anyway, LBPCG, Listen to Deathshadow, he know 10x as much as I do, and is patient enough to do a free recode for you. Though Jason, did you know: <title> Home - LittleBigPlanet Creators Group </title> Code (markup): Causes a bit of a problem in Opera 9.5? (not rendering, just an annoying bug). Save that in a HTML file, open it with Opera and View->source. The title is all screwed up then (adds a new line). Nothing to worry about, but I do a lot of editing in that editor, and just found that quirk.
Not seeing anything of that nature here in 9.51 - never heard of any sort of white-space bugs in the opera editor.
Thanks guys or the comments, I will read them in full soon. deathshadow you look very educated about this, thanks for the time taken to help. Just wanted to pop in and show you are new site we are doing: http:// lbpcreatorsgroup.bravehost.com/index.html Currently, we have to work out the videos section (so they aren't all left aligned), the image at the top, and the content.