Slight Layout problems

MrWulf · September 20, 2011, 4:18pm

Hi All
I’m a web programming n00b, been a programmer in c++, python etc for some time and always wanted to learn web programming so started a couple of weeks ago. I’m trying to make myself a website and have managed to make something like the following example, with some problems numbered and circled. My Html and css follows. After some experimentation, research and tweaking I
still cannot understand why the page looks the way it does.

Even though the list has been given similar qualities to the paragraph above it the font-weight is much slimmer and there is an unintentional indentation
The sub heading h2 tags next to my main heading aren’t lined up how I would like them to be

3)Unintentional indent on the list of links on the right hand side

for some reason the text “email” and “address” are on consecutive lines as opposed to the same line, although there is sufficent width for them to be on the same line.
I need the image in the centre between the two paragraphs, although it is here (the kitten is a test image!)
The second paragraph has moved down the page since inserting the list of ‘skills’ on the left hand side, before it looked like this:

The above is more or less the kind of format I want to keep, except with a list of skills to be added to either side of the test picture

Code is as follows:

<html>
  <head>
    <title>Lloyd-Crawley.com(&#12525;&#12452;&#12489;&#12463;&#12521;&#12524;&#12456;)</title>
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <link rel = "stylesheet" type="text/css" href="websitestyle.css"/>

  </head>

  <div class="page">

    <div class ="title">
    <h1>Lloyd Crawley(&#12525;&#12452;&#12489;&#12463;&#12521;&#12524;&#12456;)</h1>
    <h2 id="englishSub">Game/Web/App Programmer</h2>
    <h2 id="japaneseSub">&#12466;&#12540;&#12512;&#12289;&#12454;&#12455;&#12483;&#12502;&#12289;&#12450;&#12483;&#12503;&#12503;&#12525;&#12464;&#12521;&#12510;&#12540;</h2>
    </div>

    <div id="textarea">
    <p class="english">Lloyd Crawley is a programmer looking to realise his ambition to get 
    into the Japanese games industry. After entering a disappointing degree he decided to take 
    responsibility for his own education, quit his degree and work full time again to save money 
    and study game development in the evening. After sacrificing most of his social life for a year 
    he has now come to japan for the last stage of his plan.</p>
    
    
    <ul id="skills">Skills
    <li><em>C and C++:</em>Including Object oriented programming, templates</li>
    <li><em>3D Programming:</em> Experience with Open GL, Direct X and good knowledge of 3D maths, experience with shaders in HLSL/Cg and GLSL, experience with animation programming</li>
    <li><em>Maths and Physics:</em> Kinematics, Rigid Body Dynamics</li>
    <li><em>Scripting:</em> Lua, python, experience in data driven design</li>
    <li><em>FMOD:</em> Sound Programming</li>
    </ul>
 
    
    <img src="kitten2.jpg"/>
    
    <p class="japanese">Lloyd Crawley&#12288;&#12399;&#12466;&#12540;&#12512;&#26989;&#12395;&#20837;&#12426;&#12383;&#12356;&#12503;&#12525;&#12464;&#12521;&#12510;&#12540;&#12391;&#12377;&#12290; </p>
    </div>

    <div id="contact">
    <p class="contact">Email Address / &#12513;&#12540;&#12523;: lloyd.crawley@gmail.com</p>
    </div>

    <div id="Links">
    
    <ul id="links">
    <li id="links"><a href>Code Snippets</a></li>
    <li id="links"><a href>Works</a></li>
    <li id="links"><a href>Blog</a></li>
    </ul>
    
    </div>

  </div>

</html>

Css as follows


body{margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px }

      div.page
     {background: red; 
      height:100%; 
      width:100%;
      font-family:"arial";
      color:white;
      padding:5px;}

      
      div#textarea,div#contact, div#skills,div#links
      {background-color:white; 
       color:red; 
       margin-left: 0.5%;
       margin-right: 1%;
       -moz-border-radius: 35px;
       border-radius: 35px;}

      div#textarea
      {float:left; font-size:16px;width: 80%;}

      div#contact, div#links 
      {width: 17%;position:absolute;margin-left:81%;}
      
      div#contact
      {font-size:16px; height:22.2%; margin-top: 2%;}
      
      div#links 
      {margin-top:35%;height:65%;}


      div#skills
      {padding: none;font-weight:bold; margin-left:0%;}

       h1,h2,h3
       {font-size:auto;}

     h1
     { text-align:left;
       margin-left: 0.5%; 
       margin-right: 2%;
       float: left; 
       -moz-border-radius: 35px;
       border-radius: 35px;
       border-color:white; 
       border-size: 10px;
       border-style: solid;
       padding: 0.5em;}

     h2
     {display: block;
      line-height:20px;
      width:33%;
      float:left;}

     h3#englishskills
     { text-decoration: underline; float:left;}


     ul#links 
     {list-style-type:none;padding-left:none;text-align:center;}

      li#links
      {font-size: 26px;
       padding: none;
       text-align:center;
       line-height:45px;
       text-align:center;}

      ul#skills
      {list-style-type:none;padding-left:none;width:33%;}
    
      a
      {text-decoration:none;
       font-weight: bold;
       -moz-border-radius: 35px;
       border-radius: 35px;
       display:block;
       color:red;}

      a:hover
      {background:red; color:white;}

      p 
      {width: 33.3%; 
       font-family:"arial"; 
       text-align:justify;
       font-weight: bold;
       padding:10px;}

      img
      {width: 25%; height: auto;
       float: left;padding: 1em;}

      .english
      {float: left;}
      
      .japanese
      {margin-left: 58.3%;width: 38.3%;}

      em
      {text-decoration:underline;}

Also, there are problems with the rounded corners in IE - even though it is ie version 9. Any hints?

Thankyou so much in advance

PaulOB · September 22, 2011, 3:50pm

HI,

You still didn’t allow for the padding.

You can’t mix percentage width and pixel padding because it won’t add up. If you want pixel padding then make the container the percentage width and then add the padding to the widthless inner elements.

If you want the contact details in the header section then put it there to start with and not at the end of the html.

I think this is what you were trying to achieve (although I may have messed up some of the inner styling a bit).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lloyd-Crawley.com(&#12525;&#12452;&#12489;&#12463;&#12521;&#12524;&#12456;)</title>
<link rel = "stylesheet" type="text/css" href="websitestyle.css">
<meta name="description" content="Lloyd Crawley programmer online site">
<meta name="keywords" content="C++,games,programmer,opengl,directx,japanese,japan">
<meta name="author" content="Lloyd Crawley">
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
ul {
	list-style-type: none;
	margin:0;
	padding:0;
}
body {
	background:red;
	color: white;
}
#page {
	font-family:Arial, Helvetica, sans-serif;
	margin:0 20px;
	zoom:1.0;
}
#header {white-space:nowrap;width:100%}
#MainTitle, #SubHeadings, #Contact {
	color: white;
	display: inline-block;
	width: 36%;
	padding: 20px 2%;
	word-wrap:break-word;
	overflow:hidden;
	vertical-align:middle;
	white-space:normal;
}
* html #MainTitle, * html #SubHeadings, * html #Contact { display:inline }/* ie6 inline-block fix*/
*+html #MainTitle, *+html #SubHeadings, *+html #Contact { display:inline }/* ie7 inline-block fix*/
#SubHeadings { width:30% }
#Contact { width:20% }
#SubHeadings h2 { font-size: 200%; }
h1#MainTitle {
	border-radius: 35px 35px 35px 35px;
	border: 5px solid white;
	font-size: 350%;
}
#MainArea, #Contact, #Links {
	background:white;
	border-radius: 35px 35px 35px 35px;
	color: red;
	font-weight: bold;
}
#Contact, #Links { text-align: center; }
#Links {
	padding-bottom: 2.5%;
	padding-top: 2.5%;
	margin:0 0 0 1%;
}
#MainArea {
	font-size: 25px;
	line-height: 40px;
	text-align: justify;
	width: 75%;
}
#Links a {
	color: red;
	font-size: 40px;
	padding: 20px;
	text-decoration: none;
	display:block;
}
#Links a:hover {
	background:red;
	border-radius: 35px 35px 35px 35px;
	color: white;
}
#Contact { font-size: 25px; }
#Links li { padding: 35px; }
#ProfilePic { background:blue }/* for testing only */
#MainArea, #EnglishArea, #JapaneseArea, #Links, #ProfilePic {
	display:inline-block;
	vertical-align:top;
	word-wrap:break-word;
}
#EnglishArea, #JapaneseArea, #ProfilePic {
	padding: 5px 1% 5px 1%;
	vertical-align: top;
	width: 30%;
}
#Links { width:23%; }
* html #MainArea, * html #EnglishArea, * html #JapaneseArea, * html #Links, * html #ProfilePic { display:inline }/* ie6 inline-block fix */
*+html #MainArea, *+html #EnglishArea, *+html #JapaneseArea, *+html #Links, *+html #ProfilePic { display:inline }/* ie7 inline-block fix */
#MainArea ul li {
	padding-bottom: 30px;
	padding-right: 20px;
}
#MainArea ul li em {
	font-style: normal;
	text-decoration: underline;
}
#ProfilePic img {
	width: 95%;
	border-radius: 35px 35px 35px 35px;
	border: 5px solid white;
	margin-top:20px;
}
</style>
</head>

<div id="page">
		<div id="header">
				<h1 id="MainTitle">Lloyd Crawley(&#12525;&#12452;&#12489;&#12463;&#12521;&#12524;&#12456;)</h1>
				<div id="SubHeadings">
						<h2 id="EnglishSub">Game Programmer</h2>
						<h2 id="JapaneseSub">&#12466;&#12540;&#12512; &#12503;&#12525;&#12464;&#12521;&#12510;&#12540;</h2>
				</div>
				<p id="Contact">Email Address / &#12513;&#12540;&#12523;: lloyd.crawley@gmail.com</p>
		</div>
		<div id="MainArea">
				<div id="EnglishArea">
						<p>Lloyd Crawley is a programmer looking to realise his ambition to get 
								into the Japanese games industry. After entering a disappointing degree he decided to take 
								responsibility for his own education, quit his degree and work full time again to save money 
								and study game development in the evening. After sacrificing most of his social life for a year 
								he has now come to japan for the last stage of his plan.</p>
						<h3>Skills</h3>
						<ul id="skills">
								<li><em>C and C++:</em>Including Object oriented programming, templates</li>
								<li><em>3D Programming:</em> Experience with Open GL, Direct X and good knowledge of 3D maths, experience with shaders in HLSL/Cg and GLSL, experience with animation programming</li>
								<li><em>Maths and Physics:</em> Kinematics, Rigid Body Dynamics</li>
								<li><em>Scripting:</em> Lua, python, experience in data driven design</li>
								<li><em>FMOD:</em> Sound Programming</li>
						</ul>
				</div>
				<div id="ProfilePic"><img src="kitten2.jpg"></div>
				<div id="JapaneseArea">
						<p>Lloyd Crawley&#12288;&#12399;&#12466;&#12540;&#12512;&#26989;&#12395;&#20837;&#12426;&#12383;&#12356;&#12503;&#12525;&#12464;&#12521;&#12510;&#12540;&#12391;&#12377;&#12290; test testtest test test test test test test test test 
								test test test test test test test test test test test test test test test test test test test 
								test test test test test test test test test test test test test test test test test test test </p>
				</div>
		</div>
		<div id="Links">
				<ul>
						<li><a href="#">Code Snippets</a></li>
						<li><a href="#">Works</a></li>
						<li><a href="#">Blog</a></li>
				</ul>
		</div>
</div>
</html>

MrWulf · September 20, 2011, 5:37pm

I have now moved the doc type to the top of the html where it is supposed to be, d’oh, and that has fixed the internet explorer issue.
However other problems persist and now it seems the links menu on the right hand side has disappeared!

PaulOB · September 20, 2011, 7:03pm

Hi, Welcome to Sitepoint

You have a number of errors where you have used ids more than once.

e.g.


 <div id="Links">
    
    <ul id="links">
    <li id="links"><a href>Code Snippets</a></li>
    <li id="links"><a href>Works</a></li>
    <li id="links"><a href>Blog</a></li>
    </ul>
    
    </div>

id’s are unique and can only be used once per page. Indeed on the example above you only need the id on the parent as all the inner elements can be targetted without classes or ids.


 <ul  id="Links">
    <li><a href="#">Code Snippets</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Blog</a></li>
 </ul>

The inner elements can be targetted with:

#links li{color:#000} etc…

Lists have a default left margin and in some browsers a default left padding so you need to remove both.

#links{margin:0;padding:0}

Also don’t bother saying div#links as it is a waset of space and makes the browser work harder than it needs to. Just #links is fine.

It’s a bad idea to create explicit global styles like this:


 a
      {text-decoration:none;
       font-weight: bold;
       -moz-border-radius: 35px;
       border-radius: 35px;
       display:block;
       color:red;}

      a:hover
      {background:red; color:white;}

      p 
      {width: 33.3%; 
       font-family:"arial"; 
       text-align:justify;
       font-weight: bold;
       padding:10px;}

Unless you are 100% sure that every p element you use is going to be styled like that which is highly unlikely. You would rarely give a width to p elements as their width should usually be controlled from the context they are in. It’s usually the parent container that would be sized to fit the space and then the content just inserted into that container without the need for any more widths.

You can’t do this either:


<ul id="skills">Skills
    <li><em>C and C

The word Skills is in no-mans-land and no content is allowed at that position. It must be inside list tags. You probably should have done something like this:


<h3>Skills</h3>
<ul id="skills">
<li><em>C and C etc......

When you have anchors make sure you put a dummy path when testing . e.g. <a href=“#'”> and not just <a href>

If you want horizontal content then you need to float the elements but they will need an appropriate width if they hold fluid content. To make content start after a floated element you will then need to add clear:both to the element. Also remember that when you float something the float must come higher in the html than the content you want to wrap around it.

Work your way through the above and then validate your html and fix the missing tags (as well as the doctype you mentioned) and once tidied up post the result and we can take it step by step if you are still having problems

MrWulf · September 20, 2011, 10:05pm

Mr Paul O’B - thank you very much for your pointers. Out of courtesy even if I fix it all by myself I will post the result here so you can see the result of your comments. Thanks again

MrWulf · September 21, 2011, 8:38pm

Firebug and the hints helped me an awful lot - but there are still a couple of things happening - due to some css fundamentals I must be missing

Here’s the latest state of the site:

This is via the heavily edited HTML and CSS as follows

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Lloyd-Crawley.com(&#12525;&#12452;&#12489;&#12463;&#12521;&#12524;&#12456;)</title>
    <link rel = "stylesheet" type="text/css" href="websitestyle.css"/>
    <meta name="description" content="Lloyd Crawley programmer online site"/>
    <meta name="keywords" content="C++,games,programmer,opengl,directx,japanese,japan">
    <meta name="author" content="Lloyd Crawley">
  </head>

  <div id="page">

    <div id="MainTitle">
      <h1>Lloyd Crawley(&#12525;&#12452;&#12489;&#12463;&#12521;&#12524;&#12456;)</h1>
    </div>

    
    <div id="SubHeadings">
      <div id="EnglishSub"><h2>Game Programmer</h2></div>
      <div id="JapaneseSub"><h2>&#12466;&#12540;&#12512; &#12503;&#12525;&#12464;&#12521;&#12510;&#12540;</h2></div>
    </div>    

    <div id="MainArea">
        <div id="EnglishArea">
    	  <p>Lloyd Crawley is a programmer looking to realise his ambition to get 
    	  into the Japanese games industry. After entering a disappointing degree he decided to take 
    	  responsibility for his own education, quit his degree and work full time again to save money 
    	  and study game development in the evening. After sacrificing most of his social life for a year 
    	  he has now come to japan for the last stage of his plan.</p>
    
    	  <h3>Skills</h3>
    	  <ul id="skills">
    	    <li><em>C and C++:</em>Including Object oriented programming, templates</li>
    	    <li><em>3D Programming:</em> Experience with Open GL, Direct X and good knowledge of 3D maths, experience with shaders in HLSL/Cg and GLSL, experience with animation programming</li>
    	    <li><em>Maths and Physics:</em> Kinematics, Rigid Body Dynamics</li>
    	    <li><em>Scripting:</em> Lua, python, experience in data driven design</li>
    	    <li><em>FMOD:</em> Sound Programming</li>
    	  </ul>
        </div>
 
        <div id="ProfilePic"> 
          <img src="kitten2.jpg"/>
        </div>
   
        <div id="JapaneseArea">
        <p>Lloyd Crawley&#12288;&#12399;&#12466;&#12540;&#12512;&#26989;&#12395;&#20837;&#12426;&#12383;&#12356;&#12503;&#12525;&#12464;&#12521;&#12510;&#12540;&#12391;&#12377;&#12290; test testtest test test test test test test test test 
       test test test test test test test test test test test test test test test test test test test 
       test test test test test test test test test test test test test test test test test test test </p>
        </div>
    </div>

    <div id="Contact">
    <p>Email Address / &#12513;&#12540;&#12523;: lloyd.crawley@gmail.com</p>
    </div>

    <div id="Links">
    
    <ul>
      <li><a href="#">Code Snippets</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    
    </div>

  </div>

</html>

body {
     background: none repeat scroll 0% 0% red;
     margin: 0px;
}

#page {
     font-family: "Arial";
     margin-left: 20px;
}

#MainTitle, #SubHeadings {
     color: white;
     display: inline-block;
}

div #SubHeadings
{width:20%;}

#SubHeadings div {
     padding-left: 20%;     
}

#SubHeadings h2 {
     font-size: 200%;
}

#MainTitle {
     width: 50%;
}

#MainTitle h1 {
     border-radius: 35px 35px 35px 35px;
     border: 5px solid white;
     font-size: 400%;
     padding: 20px;
}



#MainArea, #Contact, #Links {
     background: none repeat scroll 0% 0% white;
     border-radius: 35px 35px 35px 35px;
     color: red;
     font-weight: bold;
}

#Contact, #Links {
     text-align: center;
     width: 20%;
}

#Links {
     padding-bottom: 5%;
     padding-top: 5%;
}

#MainArea {
     font-size: 20px;
     text-align: justify;
     width: 80%;
}

#MainArea div {
     display: inline-block;
     padding: 5px 5px 5px 25px;
     vertical-align: top;
     width: 33%;
}

ul {
     list-style-type: none;
     padding-left: 0px;
}

#MainArea ul li {
     padding-bottom: 30px;
}

#Links a {
     color: red;
     font-size: 40px;
     padding: 20px;
     text-decoration: none;
}

#Links a:hover {
     background: none repeat scroll 0% 0% red;
     border-radius: 35px 35px 35px 35px;
     color: white;
}

#Contact {
     font-size: 25px;
}

#Links li {
     padding: 35px;
}

#MainArea ul li em {
     font-style: normal;
     text-decoration: underline;
}

#MainArea div img {
     width: 100%;
}

The main questions I have are

The main text area with div id “MainArea” has all of its children that are divs to have 33% width of the available space, and are inline-block, but for some reason the test image has gone to the right and the next div element in the html after the image is underneath the first div element on the container instead of to the right of the test image. My brain hurts.
the sub headings next to my name and the div that they are in make no sense layout wise - in firebug I check their
box dimensions re: padding etc but after tweaking they’re still not lined up how I want…

thanks again

PaulOB · September 22, 2011, 10:34am

You have added padding to the elements so their overall width is now much wider that the 33% you set and thus there is no room for them to align horizontally anymore. If you add some percentage padding then reduce the width they should fit. You always need to leave a little leeway with inline block because white space nodes get in the way just like the space between words.


#MainArea div {
	display: inline-block;
	[B]padding: 5px 1% 5px 2%[/B];
	vertical-align: top;
	[B]width: 30%;[/B]
}
* html #MainArea div{display:inline}/* inlne block fix for ie6 and must follow original rule*/
*+html #MainArea div{display:inline}/* inlne block fix for ie7 and must follow original rule*/

You need the fixes above for ie6 and 7 and will need to add them for any other inline-block elements you use.

Also be careful width this:

#MainArea div{styles etc…}

If you later on need an extra div in that section in the inner content then it will be hit by those rules also. You would have been safer to style the actual parents by classname with the rule above rather that hitting every single div that may appear. It’s fine as you have it now but I can see that at some stage you will need extra divs in the middle and come unstuck.

the sub headings next to my name and the div that they are in make no sense layout wise - in firebug I check their
box dimensions re: padding etc but after tweaking they’re still not lined up how I want…

thanks again

When using inline-block remember to set the vertical-alignment as browsers vary on the default. The usual is vertical-align:top and it looks like that’s what you wanted for your main title. There is actually no need for that maintitle div as all styles could be applied to the h1 directly and save mark up.

Large border-radius dimensions will clip your content so ensure there is enough padding to protect the content inside.

Remember that padding and borders add to the overall width of elements so if your issues are one of spacing then this must be taken into account.

You seemed to have tidied up the page quite a bit although I’m not keep on your mixed case names. e.g. you have #page but then you have #Links. Choose one or the other and be consistent. I prefer all lower-case and use hyphens rather than camelCase but that’s just me

I couldn’t really see what you were aiming for so couldn’t be more specific:)

MrWulf · September 22, 2011, 2:34pm

Thanks for your help again Paul. I’m afraid the camel case abuse comes from years of C and C++ and a dislike of underscores, that seemigly crosses over into hyphens for CSS! I have adjusted the widths of the internal divs and it looks a lot more how I would like it. However, despite some tweaking of other div widths the ‘links’ div isn’t popping into the spot I’d like it to.

Here is my intended appearance:

Here is the new CSS

body {
     background: none repeat scroll 0% 0% red;
     margin: 0px;
}

#Page {
     font-family: "Arial";
     margin-left: 20px;
}

#Page div
{display:inline-block;vertical-align:top;}

#MainTitle, #SubHeadings {
     color: white;
     display: inline-block;
}

div #SubHeadings
{width:40%;}


#SubHeadings div {
     padding-left: 10%;   
     display: block;  
}

#SubHeadings h2 {
     font-size: 200%;
}

#MainTitle {
     width: 40%;
}

#MainTitle h1 {
     border-radius: 35px 35px 35px 35px;
     border: 5px solid white;
     font-size: 350%;
     padding: 20px;
}



#MainArea, #Contact, #Links {
     background: none repeat scroll 0% 0% white;
     border-radius: 35px 35px 35px 35px;
     color: red;
     font-weight: bold;
}

#Contact, #Links {
     text-align: center;
     width: 15%;
}

#Links {
     padding-bottom: 2.5%;
     padding-top: 2.5%;
}

#MainArea {
     font-size: 25px;
     line-height: 40px;
     text-align: justify;
     width: 75%;
}

#MainArea div{
     display: inline-block;
     padding: 5px 5px 5px 25px;
     vertical-align: top;
     width: 30%;
}

ul {
     list-style-type: none;
     padding-left: 0px;
}

#MainArea ul li {
     padding-bottom: 30px;
     padding-right: 20px;
}

#Links a {
     color: red;
     font-size: 40px;
     padding: 20px;
     text-decoration: none;
}

#Links a:hover {
     background: none repeat scroll 0% 0% red;
     border-radius: 35px 35px 35px 35px;
     color: white;
}

#Contact {
     font-size: 25px;
}

#Links li {
     padding: 35px;
}

#MainArea ul li em {
     font-style: normal;
     text-decoration: underline;
}

#MainArea div img {
     width: 100%;
      border-radius: 35px 35px 35px 35px;
     border: 5px solid white;
     margin-top:10%;
}

sdt76 · September 22, 2011, 5:05pm

MrWulf, just as a slight curiosity, I was wondering why you styled your background as

background: none repeat scroll 0% 0% red;

Isn’t that the same as

background: red;

You don’t need positioning values if you have nothing to position and you don’t need to specify background: none unless you are overriding a less specific style, which would be odd in this case since you are styling the body not a more specific element.

PaulOB · September 22, 2011, 5:27pm

I’m guessing it was copied frOm Firebug which shows all the default values. I changed it to just red in my example also

MrWulf · September 22, 2011, 5:48pm

sdt76:

MrWulf, just as a slight curiosity, I was wondering why you styled your background as
background: none repeat scroll 0% 0% red;
Isn’t that the same as
background: red;
You don’t need positioning values if you have nothing to position and you don’t need to specify background: none unless you are overriding a less specific style, which would be odd in this case since you are styling the body not a more specific element.

Ah! The magic of firebug. I simply set it as

background:red

but after it went through the live edit feature in firebug it is somehow got rewritten/interpreted by the editor as

background: none repeat scroll 0% 0% red

Since I cant save in firebug itself I’ve had to copy/paste the above output back into my original css file.

MrWulf · September 22, 2011, 11:51pm

Paul! You’re too kind sir. I will give that a test in a sec, it’s 00:50 in the UK and I will reply tomorrow with hopefully success!

MrWulf · September 24, 2011, 12:02pm

Paul that works fine, it looks fantastic!
Thanks again