1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div Border/Width Problem...

Discussion in 'CSS' started by beagrie, Mar 27, 2008.

  1. #1
    Hello,

    I'm currently making the transition from a hobbyist web designer to offering web design services and, as a result, have been tearing my hair out over the stupidest of small things in making my standards compliant web site.

    I'm doing my testing in;

    - FireFox 2.0.0.13, (Fails Acid2 Test)
    - Safari 3.1 (Passes Acid2 Test)
    - Internet Explorer 7 (Fails Acid2 Test Spectacularily)
    - Internet Explorer 8 (Passes Acid2 Test)

    My problem is I have a div tag that is set in the style sheet to be a certain width with a border of 1px directly below an image with a graphical 1px border, the idea being that it should look like a complete border when put together. In FireFox and Safari it renders fine but in IE (surprise surprise) it renders 2px too narrow.

    I think it's a bit too coincidental that the difference in width is 2px when the div has a 1px border all around, so my question is this;

    Is it, as I'm assuming, IE that's doing it wrong, maybe rendering the border inside the div's outer dimesnions instead of outside, and is there a work around that doesn't involve browsers specific code?

    I've put the page up at http://www.emptycupboard.co.uk/pre if anyone would like to take a look. Thank you in advance for any help anyone might be able to offer.
     
    beagrie, Mar 27, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Never assume IE is ever doing something right. It is 10 years behind web standards. And don't concern yourself with Acid2. You can pass Acid2 but still have a bad browser.

    In any case, I'm going to try and look at this before I have to leave in a minute.
     
    drhowarddrfine, Mar 27, 2008 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    Well, that was quick. First observation: You will never get IE to attempt to perform like a modern browser, such as Firefox/Opera/Safari, without a proper doctype. IE is in quirks mode without one. Use this on the very first line of your markup:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
     
    drhowarddrfine, Mar 27, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Second important bit of advice: Don't test in IE8. It's beta-- it will change completely by the time it's ready for primetime! It's out not for people to test websites against... it's out so people can test IE8 against compliant well-built sites, to find IE8 BUGS while it's still being tweaked.

    Instead, download the Multiple IEs from Tredosoft.com and test with 7 and 6 (7 should stay on your machine even after downloading the Tredo's). There will be a lot of people continueing to use IE6 so it doesn't matter if your site is spectacular in all other browsers; if it looks awful in IE6 people will blame the site, not the browser.
     
    Stomme poes, Mar 27, 2008 IP
  5. beagrie

    beagrie Peon

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you! I never even looked at the header, I usually put the doctype in but I missed it here. Go figure. That was bugging me so much!

    On a side note, drhowarddrfine, I know IE8's not a good example for testing, I just happened to have it on a machine so I tried it. And if I didn't know, It would have been made clear by the fact that adding the doctype I stupidly missed out completely broke my site in IE8, fine in 7 though. And thank you for pointing out where I can get IE6... hadn't looked yet but was wondering.

    Thank you again
     
    beagrie, Mar 27, 2008 IP
  6. beagrie

    beagrie Peon

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    AHHH!

    Ok I've given in. When I put <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> IE works like a dream. My site looks all sexy and its all good. However, it then breaks in FF and Safari... spectacularily.

    I've given up and put some php code at the start of the page that only inserts the doctype if the browser is IE but does anyone know why the doctype might break the site in FF and Safari. I've checked my code with the standards code checker, is their something it... and I might have missed?
     
    beagrie, Mar 27, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Some advice:

    First, you got too complicated for your own good here. 13 images on a fixed width layout - and you don't even have content yet? All those corner images would be better combined down to single images. (or perhaps even A single image!) - even as dynamic width this is a bit big for it's britches.

    If you want to start doing this 'professionally' - you need to learn some semantic markup. You have menus - menus are lists, mark them up as lists. You have a header, make it a header TAG... and indent your code properly so as to avoid missing on closing tags.

    A doctype should be a given - frankly be it XHTML 1.0 or HTML 4.01 (doesn't really matter) you should be working in a strict doctype so when you validate your code you get stricter rules. (Which is why I prefer X1.0, I like stricter rules)

    Those empty comments to force the min-height small enough - wasted code. Just set the font size to 1px, you'll be fine. IE won't size an empty element shorter than the font-size or line-height... since IE rounds down line-height, and the default is 1.2em for IE, font-size 1px = line-height:1px nabbing both in one declaration.

    ... and I can't believe I'm actually saying this to someone - ease up on the tab key... You're not even bothering with tabs in the html, but the CSS has so many tabs in it that it shoves the actual CSS offscreen at default tab width. You want one indent per level, not "Holy **** I have to scroll sideways on a 1600x1200 screen"

    When dealing with psuedo-properties like :hover and :active, A> they all inherit from their parent element, so you don't need to state text-decoration:none on all of them if you did so on the parent, B> if multiples are getting the same value, put them TOGETHER. For example, where you state a:link, a:visited, a:hover and a:active separately, could be condensed down to just:

    a {
    	color:#099;
    	text-decoration:none;
    }
    	
    a:active,
    a:focus,
    a:hover, {
    	color: #0BB;
    }
    Code (markup):
    *** note *** - I added a :focus state as well just so we trip states for more keyboard navigators. HONESTLY, I'd add a third color state for :visited on 'normal' links in your content. Disabling :visited like that is bad accessability. I'd also NOT disable the underline on ALL anchors, just the ones that shouldn't have it like the menu buttons. (again, bad accessability - not everyone can see the color difference of links)

    Let's see... I'm going to recode this site 'my way' documenting as I go to explain my approach so you (and others) can learn from it.

    My approach is 'backwards' to a lot of people, as I believe that first you should put all your content in the html in the order it will appear 'in flow' using semantic markup - THEN you divide the content up into sections, THEN you add any sandbags you think you need to apply image. Then and ONLY then do you start applying layout via CSS to the page, in the process designing the images you will hang on that layout. The 'content first' instead of 'cute .psd first' approach generally results in more attractive, more accessable, better written and easy to maintain pages.

    The code will be following my style guide:
    http://battletech.hopto.org/html_tutorials/styleGuide.txt

    First I'd start off with my baseTemplate.html
    http://battletech.hopto.org/html_tutorials/baselines
    (feel free to look around the html_tutorials directory on my server - I've released all my code as public domain so go ahead and use it, just toss a backlink to that directory if you do and we're kosher)

    The first thing on the page is that top menu.... Menu is a list, so we'll make that a list called... topMenu.

    <ul id="topMenu">
    	<li class="first"><a href="#">Home</a></li
    	><li><a href="#">Services</a></li
    	><li><a href="#">Portfolio</a></li
    	><li><a href="#">News</a></li
    	><li><a href="#">Contact</a></li
    	><li><a href="#">About Us</a></li
    	><li><a href="#">Site Map</a></li>
    </ul>
    Code (markup):
    You'll notice I formatted those kind of funny - some browsers will add white-space between formatted LI - there are two options to 'fix' this 'problem'. Strip out all the white-space leaving you no formatting, or place the white-space someplace 'harmless' like inside a tag. I chose the latter approach.

    From there we have a fixed width box that's centered - so that's a simple #container. Inside that the first thing we have is the top border, a content area with a repeat-y background, two images to add gradient to that background... For those two images rather than blowing classes on nothing, how about instead we nest inside .borderTop a div and a span. That way, we don't have to blow more classes on them. so that's:
    <div id="container">
    	<div class="borderTop"><div></div><span></span></div>
    	<div class="borderContent">
    
    Code (markup):
    Next is the header image with the rounded top. This is a full on page header, so I'd use a h1 here (as the only h1 on the page). The image is presentational, so it has no place in the markup - we'll place that using a dummy span in a technique much akin to the 'glider-levin' image replacement method, then put text UNDER the image so we have actual text instead of relying on alt-text for that.
    		<h1>
    			emptyCupboard Media
    			<span></span>
    		</h1>
    Code (markup):
    You have some 'other text' that's not really part of what I'd consider the h1 - I'm assuming this is for more menu options, contact information, or some other form of subdata. Because it's subdata, I'd make this a DIV AFTER the H1.
    		<div id="otherHeaderStuff">
    			Other Stuff
    		</div>
    Code (markup):
    I would likely change the ID to describe what's actually going there. Remember, classnames should say what something is.

    Next is your main menu - again that's a list, so UL/LI it is.
    		<ul id="mainMenu">
    			<li><a href="dimbo.com">Home</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Portfolio</a></li>
    			<li><a href="#">News</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Contact</a></li>
    		</ul>
    Code (markup):
    You are going to have a content area below this - as such I'd give it it's own DIV just to be sure.
    		<div id="content">
    			Content
    		<!-- #content --></div>
    Code (markup):
    Then comes the bottom border closing off the container.
    	<!-- .borderContent --></div> 
    	<div class="borderBottom"></div>
    <!-- #container --></div>
    Code (markup):
    ... and that's it for the HTML - on to the CSS.

    First for simplicity sake, we'll use a universal reset so all browsers start out on a fairly equal footing:
    * {
    	margin:0;
    	padding:0;
    }
    Code (markup):
    Then comes the body tag. Since we're centering a lot of content we'll set text-align:center so that IE5 will still center stuff. Rest is just fonts and colors, though I'm assinging the gradient background here, then pushing it down the page the height of #topMenu by using background-position.
    body {
    	text-align:center; /* center #container in IE5/earlier */
    	font:normal 85%/120% "Lucida Sans Unicode","Lucida Grande",sans-serif;
    	color:#000;
    	/* 20px below = total height of #topMenu */
    	background:#CCC url(images/bodyBackground.jpg) 0 20px repeat-x;
    }
    Code (markup):
    Next are the global anchor settings. I varied the colors slightly, and made 'normal' links retain the underline for accessabilty sake.
    a {
    	color:#056;
    }
    
    a:visited {
    	color:#026;
    }
    	
    a:active,
    a:focus,
    a:hover {
    	color:#06A;
    }
    Code (markup):
    First thing on the page is the first thing we should style - #topmenu. We strip the list of bullets, we don't need to set centering since that's on the body, top and bottom padding + 13px line-height + 1px bottom border = 20px - same as we declared in body. Tossing a bottom margin on this will push our content area down where we want it.
    #topMenu {
    	list-style:none;
    	padding:3px 0;
    	margin-bottom:20px;
    	font-size:12px;
    	line-height:13px;
    	background:#FFF;
    	border-bottom:1px solid #000;
    }
    Code (markup):
    It's line-items we'll just set to display:inline, give them some side padding, and that border on one side as our separators. We'll also strip the border off the first one.
    #topMenu li {
    	display:inline;
    	padding:0 8px;
    	border-left:1px solid #000;
    }
    
    #topMenu .first {
    	border:none;
    }
    Code (markup):
    The anchors for the menu are simple
    #topMenu a {
    	text-decoration:none;
    	color:#000;
    }
    
    #topMenu a:active,
    #topMenu a:focus,
    #topMenu a:hover {
    	color:#06C;
    }
    Code (markup):
    Now on to our container - to keep it simple and prevent older IE's from complaining we'll only apply width and centering here. NO other 'in flow' elements will have widths applied to them. This dodges your whole width calculation issues you were having.
    #container {
    	width:900px;
    	margin:0 auto;
    }
    Code (markup):
    Because the top and bottom borders have SO much in common, we'll declare their like properties together. Height, set the font size to 1px to dodge that wierd IE minimum container height issue, and the background-image... What I chose to do here is make the background image, top, middle and bottom a single file 2700x10px in size... left 900px being the top, middle 900px being the bottom, right 900px being the repeat-y.

    http://battletech.hopto.org/for_others/beagrie/images/containerBorders.gif

    As a .gif we lose no image quality because there are so few colors, yet end up with a file that is size-wise barely larger than any one 'edge' of your image - and it's 7 less files, meaning 7 less 'handshakes' with the server turbocharging page loads.

    We also set position:relative so when we get to the nested DIV and SPAN we can absolute position them. .borderBottom gets it's backround-position slid over to reveal the bottom image.
    .borderTop,
    .borderBottom {
    	position:relative;
    	height:10px;
    	font-size:1px;
    	background:url(images/containerBorders.gif) 0 0 no-repeat;
    }
    
    .borderBottom {
    	background-position:-900px 0;
    }
    Code (markup):
    Next are the nested DIV and SPAN inside .borderTop - By absolute positioning them we automatically make the span display:block, letting us set width and height on them.

    They too share a single image (10x300) with a background-slide to reveal the proper 'half'.
    http://battletech.hopto.org/for_others/beagrie/images/containerSideGradients.jpg

    Like above they share enough properties to be declared together, and have enough differences to have their own declarations too.
    .borderTop div,
    .borderTop span {
    	position:absolute;
    	top:10px;
    	width:5px;
    	height:300px;
    	background:url(images/containerSideGradients.jpg) 0 0 no-repeat;
    }
    
    .borderTop div {
    	left:0;
    }
    
    .borderTop span {
    	right:0;
    	background-position:-5px 0;
    }
    
    
    Code (markup):
    This 'attaches' the two side gradient images to border-top, hanging down over our .borderContent area. They will depth sort over .borderContent because they are absolute, while .borderContent is a normal flow element. For .borderContent we want to set a min-height so that our content is never shorter than the 'hangdowns'. Some simple padding to clear the background-image and make it pretty also helps out. IE6/earlier has no min-height, but will treat height as such - so we hide that behind a simple * html hack. The background image you can see is slid over 1800px, revealing that right 900.
    .borderContent {
    	min-height:300px;
    	padding:5px 15px 0;
    	background:url(images/containerBorders.gif) -1800px 0 repeat-y;
    }
    
    * html .borderContent { /* lte IE6 */
    	/* IE6 and earlier have no min-height, but treat height as such */
    	height:300px;
    }
    Code (markup):
    The H1 needs a height, I set the font size to something large but not extreme, set the line-height equal to the height to center the text top to bototm, and give it position:relative so that the image replacement span can be absolute positioned.
    h1 {
    	height:169px;
    	font-size:32px;
    	line-height:169px;
    	position:relative;
    }
    Code (markup):
    The span gets absolute positioning to the top left corner, a width and height (it's out of flow, so it doesn't violate what I said above about widths), and the image attached to it as a background.
    h1 span {
    	position:absolute;
    	top:0;
    	left:0;
    	width:870px;
    	height:169px;
    	background:url(images/logo.jpg);
    }
    Code (markup):
    Then there's the #otherHeaderStuff. To get this where we want it over the h1 the simplest approach is to make it position:relative with a negative top margin. This 'rides it up' over the h1. I made it 5px shy of the full h1 height to fake a top margin, and set text-align to right to mimick what you had. Some side padding makes it pretty, and I declared the font size in px since we are working inside a fixed-height container (that could break the layout if the font enlarges - depending on how much content you put in it)
    #otherHeaderStuff {
    	position:relative;
    	/* subtract 5px from h1 height from this to fake top margin */
    	height:164px;
    	margin-top:-164px;
    	padding:0 10px;
    	text-align:right;
    	font-size:14px;
    }
    Code (markup):
    The main menu is much like above. Strip the bullets. I set overflow:hidden to wrap the floats in standards compliant browsers, while setting zoom:1 to trip haslayout to wrap floats in IE. Technically we could declare a width or height here to trip haslayout, but with the border width would break IE5, and even if we make the height our desired 25px, that would have the problem that should the content actually wrap for some reason (fixed width, shouldn't happen) the buttons woudl get cut off by our overflow. One 'invalid' CSS property that doesn't mess up other browsers to make IE5 work? Fine. Oooh look, ONE css validation error.
    #mainMenu {
    	list-style:none;
    	overflow:hidden; /* wrap floats */
    	zoom:1; /* haslayout */
    	background:#69C url(images/mainMenuBackground.gif) 0 0 repeat-x;
    	border:1px solid #000;
    }
    Code (markup):
    Because you have the anchors set left, floating left - I'm assuming you might be thinking dropdown menu. The best way to handle floated menu links is to set the li to display:inline, then float and pad the anchor. As such, I applied all styling to the anchor.

    This too gets images combined to a single file, the 'hover state' being below the 'normal state' as a single 1x50 .gif - on the hover we slide the background up to show the different image.
    http://battletech.hopto.org/for_others/beagrie/images/mainMenuBackground.gif

    I also added background-color states to match for people browsing with images disabled.
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu li a {
    	float:left;
    	padding:5px 8px;
    	text-decoration: none;
    	font:bold 13px/15px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    	color:#000;
    	background:url(images/mainMenuBackground.gif) 0 0 repeat-x;
    	border-right:1px dotted #000;
    }
    
    #mainMenu li a:active,
    #mainMenu li a:focus,
    #mainMenu li a:hover {
    	background-color:#9CF;
    	background-position:0 -25px;
    }
    Code (markup):
    Believe it or not, all that leaves is our #content DIV, which I applied some top/bottom padding to just to space it out a bit, and set the text-align to left since I'd assume this will be 'normal' content from that point forward.
    #content {
    	padding:10px 0;
    	text-align:left;
    }
    Code (markup):
    ... and that is how I'd have done it. You can see it live here:
    http://battletech.hopto.org/for_others/beagrie/template.html

    as with all my examples, the directory is unlocked:
    http://battletech.hopto.org/for_others/beagrie

    So you can grab the gooey bits and pieces. You should have a look in the images directory since that's where I made a lot of changes - reducing it from 72k in 13 images to 24k in 5 images. Validates XHTML 1.0 Strict, CSS would validate if not for the use of zoom to trip haslayout, tested working in IE 5.5, 6 & 7, Opera 9.26 and 9.5 beta, Firefox 2.0 and 3 beta, Safari 2 OSX 10.4.8 and Safari 3.1 windows.

    Now, I'm not saying mimick my coding style 100% - I'm just hoping that by showing you my approach you can learn something about working cross browser, as well as in terms of simplifying your CSS and/or layout methods. There are literally thousands of different approaches to doing layouts like these - more ways you see it done, more tools in the toolbox.

    A final note - having a valid doctype, with validating markup, validating (or as close to validating as is reasonable - sometimes IE forces your hand here) CSS,

    Hope this helps.

    edit - I noticed FF was trying to do a min-height setup... Is this supposed to fill the whole screen even when there's not enough content to do so? If so that's a bit more complicated - but not impossible though the image sizes would likely have to grow (to compensate for having to run the repeat-y part full screen height)
     
    deathshadow, Mar 28, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    So you do that for IE's whitespace bug? I always just thought it was part of your funny indenting style : ) And if you're floating the a's anyway... why?
     
    Stomme poes, Mar 28, 2008 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    The second menu is floated - which is formatted normally. The FIRST menu up top is not floated - since it's centered... as such it gets the 'funny formatting'.
     
    deathshadow, Mar 28, 2008 IP
  10. beagrie

    beagrie Peon

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Wow, thank you deathshadow. I can't believe you put so much effort into helping a random standards newbie. I would like to make a few points in my defense.

    - The PHP code I put in was IF ELSE, if it was IE it put in the doctype drhowarddrfine mentioned, otherwise it put in transitional en. I had just forgotten to put it in before but I am aware of it.

    - The HTML code is really a draft. The site will be working on a CMS Template basis using one design page. I was getting the design working but I would have sorted the HTML out before going live. As you've pointed out, if anything I'm a little over eager with indenting my code.

    - Some of the problems you mentioned with the style sheet are down to me just ripping it from an earlier site (when I was even less experienced than I am now) out of pure laziness to avoid re-typing over half the script, mainly for the rounded border box which I'd done before. That's why it was full of tags that weren't used.

    - The DIV is so all over the place mainly because I original intended the design to be fluid, but went against it and haven't yet looked at redoing the container as I'm having all this browser trouble.

    That aside, seriously, thank you. That was a hell of a reply. I've just got home from work and I'm pretty much at my comp for the night so gonna try and get as much done on the site as possible, taking what you've said into account. Normally I wouldn't think anyone would care but if I'd taken the time to type all that I'd have a vague interest in whether it was worth it, so I'll post if I do or don't get it all working nice.
     
    beagrie, Mar 28, 2008 IP
  11. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #11
    You probably used IE as your design browser. If so, then you are designing to a bug. All versions of IE are 10 years behind web standards. So, if you design to a bug, you can't expect modern browsers, like Safari/Firefox/Opera, to work with buggy code.

    One test of this is that you say your page doesn't look like Safari/Firefox. I'd bet Opera looks like them, too. So which would be right? Every other browser, or IE?

    In addition, validation means you used the right syntax but not necessarily used the markup in the correct way for your design. It's like a spell checker telling you "Our dog car drive well" is correct but obviously it makes no sense.

    Never, ever, ever trust IE.
     
    drhowarddrfine, Mar 28, 2008 IP
  12. beagrie

    beagrie Peon

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I use FF as my design browser. Don't worry, as inexperienced (relatively) as I am, I'm fully aware of IE's history. The code works fine with my other test browsers using a transitional en doctype or no doctype but not in IE. If I put the doctype tag you posted in it works fine in IE but not in the other browsers.

    I've always used transitional en doctype tags in my webpages, is that a mistake on my part?
     
    beagrie, Mar 28, 2008 IP
  13. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #13
    Browsers render pages with either doctype the same. Only the validator cares which doctype you use. The purpose of the transitional doctype is so the validator won't flag old tags in old pages as errors as you "transition" them to current standards. Since you have no use for deprecated markup, you have no use for the transitional doctype.

    The fact that IE and other browsers change things around shows the huge differences between IE and modern browsers. Here is what you need to do:

    1) There is no question you should be using a doctype. End of story.
    2) If your page works in FF, et al, and validates (both html and css), then your markup is good.
    3) Adjust for IEs quirks and bugs. Do NOT go about trying to "fix" the other browsers.
     
    drhowarddrfine, Mar 28, 2008 IP
  14. beagrie

    beagrie Peon

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #14
    It looks like this was all more my lack of understanding regarding the doctype than css. I know I should be getting it to work in FF then working around it's IE problems but I assumed that because it DID work in FF and Safari until I put your doctype in, that it was IE that was messed up.

    Bloody typical that I design an entire page forgetting to put a doctype tag in at all that doesn't work in IE, then when I put the doctype in it only works in IE.

    I think shadowdeath was pretty much on the money with the design being "big for it's britches".

    I feel I should probably point out (after you've all been so helpful) that by "offering web design services" I never meant full time... yet, This whole venture is going to be an attempt at running a web design service beside my 9 to 5 (6:30 to 5 in my case) offering mainly brochure sites and small time CMS. I kinda feel obligated to let you all know I wasn't planning to advertise myself on the same level as headscape (for example) or blue dolphin, etc.

    I can't thank you guys enough for all the help. If nothing more gets said here, feel free to look at emptycupboard.co.uk in the future and send any abusive coding related email to me once the site goes live. Things only get better through by working through it's flaws.
     
    beagrie, Mar 28, 2008 IP