GazNicki

My bad, I misread the initial advice. CSS now reads: #header { width: 950px; margin: 0 auto; padding: 9px; color: #777; } #headerleft { width: 450px; padding: 0 25px; float: left; } #headerleft a { display:block; } This now displays perfectly in all browsers. Many thanks man!

Thanks mteam, but that still leaves me with a 2px gap between the yellow band and the content div - allowing me to see the body backgound throught it. This is still only in firefox, the rest are OK. CSS now reads: #header { width: 950px; margin: 0 auto; padding: 9px; color: #777; } #headerleft { width: 450px; padding: 0 25px; float: left; display: block; } Cheers.

I am developing a webite for a client, and it is almost complete. There is only one small problem at the moment, and that is the way the website looks in Firefox compared to the other browsers. The menu has a strip of colour underneath it. In Firefox, this is partially covered needing an additional 2px of padding to show it. In IE9, Google Chrome (latest version) and Safari for Windows (Latest verssion) it needs an additional 5px of padding. Where have I gone wrong with this? I am assuming it is my coding that is at fault rather than Firefox's, so some help would be greatly appreciated. Link: http://www.mmprojectsltd.co.uk/site/index.php Any help would be greatly appreciated.

Thanks for the advice. This is a different approach to the one I was going to take, but being cross-browser compatible makes this more interesting. Thanks, will look at this in more detail.

Thanks for that, this is definately the issue I have. Problem is the requirement to have "fixed sizes" on certain elements, yet "fluid sizes" on others. I think I know which way to look at it though, thanks for the help. Much appreciated.

Hmm, maybe this is where I am going wrong as I am using a mix of the two rather than either one or the other. But I won't be able to get the strict layout using percentages only. :/ Would a link make a difference?

I am making a website for a friend who is very particular about what he wants. He is designing the style, I am simply making it appear on screen so to speak. The layout consists of a wrapper div (98% wide, centered) with a header across the top and a footer across the bottom. The menu is on the left hand side of the screen (120px wide). Then there is the main content to the right of the menu div (floated left to butt up to the menu div). This main content div is split into columns, with one column (<div id="col1">) which is 180px wide, followed by another div that contains a large image. The site looks right in full screen, but at 1024x768 the divs move. The "col1" div moves UNDER the Menu div, and the image div moves below that. The whole point of the site is to "grow" with the content. If the content grows longer, then the website scrolls downwards (this works OK). If the content grows wider than the screen, the website again can scroll sideways. It is this bit that fails as it moves the divs. How can I make it so that a resized (or viewer with a smaller screen) sees the site without the divs moving around?? I have a feeling this is something I have done with the way I have placed the divs. Thanks in advance guys.

OK, Guys I want people's opinions. When I am asked what my thoughts are on 100% Flash Based Websites, I often shudder before screaming "NNNOOO!!" at the top of my lungs - and from the reactions of the people asking me the question I am not alone in my instant reaction. However, after having a look at a few websites as examples, I am starting to think that maybe I am way out of touch on this subject and should be taking myself to a small dark cave somewhere to study undisturbed on the subject. But before I do send myself to purgutory, I wanted to ask the people that know best first. Now, today I was asked the same question by a Graphic Designer that is looking for a new website and he asked me the question "What do I think about 100% flash websites?" and when I told him I wasn't a fan he laughed and said, "thats what you all say". So we looked at some websites and discussed options. CSS is powerful and we can do some nice things with menu's with CSS (even more with CSS3) and some pretty jQuery will make the site look rather lucious. But when we visited another site, it got me thinking. It is 100% Flash (or so it seems) and is beautiful. Now, I know that users will need the Flash Plugin, but how many visitors (except those on mobile devices) won't have the Flash Plugin being honest? So now I am caught in a bit of a dilemma. Do I look into Flash, or steer clear? Some of the effects can be truly breath-taking, and this example website was quite smooth and quick. So what is your opinion on 100% Flash Based Websites? Is it a Go-Go or a No-Go?? Example site: http://www.thetouchagency.co.uk

Thanks for the heads up. I have the following for two div's: -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; Obviously the first two throw up the errors, but the border radius doesn't. I guess until all the browsers support it, I either have to put up with the errors (which I may mention on the site somewhere) or cut them out and hope that visitors will update to the latest browsers each time. I did read some where that there is a jQuery to get around this, but I am wary. I haven't actually found the code either yet, but feel it may just put extra load on the website.

Since your starting out, why not search google for "Fluid CSS Layouts". There are many free layouts on the web for you to use, not templates, just layouts. This will allow you to have a visual medium to learn the basics from quickly. You can then either attempt to make your own layout using the downloaded one as a guide, or simply adjust the downloaded one to suit your needs. As already mentioned, Tables are to be used to display data in a table only. They should NOT be used for web-site layout. The very old method of designing sites did use tables, but that was considered redundant many years ago. There are hundreds of resources out there to learn CSS. Good luck with your design and keep us posted how it goes

Beer Token clicks to you both gentlemen. Thank you very much

Hi guys, Is there anyway to get the W3C Jigsaw validator to ignore the Vedndor Specific tags such as -moz- or -webkit-?? I know that there is a little debate on these around the web with some people thinking that they should be considered valid, and some thinking that they shouldn't but regardless of the debate - is there a way to get the validator to ignore them??

Thanks for that Been searching, and there is a few button makers online for these now. Googling "80 x 15 buttom maker" brings up a few

Can anyone tell me the name of the small icons you see on webpages for things like XHTML Valid or CSS Valid?? I'm talking about the ones that are 15 or 16px tall and about 80px wide and need the special blocky font. An attachment is enclosed so you know what I mean. I keep thinking favicon but I know that is wrong as that the icon that appears in the searchbar, bookmarks etc. Been doing my head in for ages.

+1 Kudos. Thank you very much.