Jump to content
NEurope
Sign in to follow this  
Followers 0
fex

CSS Problem

By fex, in General Chit Chat

Recommended Posts

Posted

I've been designing a new website for a small company. I'm not super confident working with CSS (it's my first time)

 

I've been editing the CSS using a web developers toolbar in Firefox, so I can see on the fly changes. And whilst I'm editing the CSS the website looks around 80% complete and I was surprised how easy it was.

 

Picture 2.png

 

When I close the Edit CSS window the page then displays like this

 

Picture 1.png

 

My CSS

 

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

a {
text-decoration: none;
color: black;
}

a:hover {
text-decoration: underline;
}

/* MAIN STYLES */

html {
background: url(images/background.png)
}

#container {
width: 905px;
background: grey
margin: 3em auto;
}

#header {
overflow: hidden;
height: 100% /* NEEDED IE6 */
}

#header img {
float: left;
}

#nav {
float: right;
position: relative;
}

#nav img.navimg {
top: 50px;
}

#maincontainer {
margin-top: 0px;
overflow: hidden;
background: url(images/mainmid.png)
}

#maincontent {
float: left;
width: 550px;
margin-left: 38px;
margin-top: 10px;
}

#maincontent p {
color: #818181;
font-family: verdana;
font-size: 12px;
margin-right: 38px;
line-height: 14pt;
text-align: justify;
}

#rightcontent {
margin-top: 10px;
}

#rightcontent p {
color: #818181;
font-family: verdana;
font-size: 12px;
margin-right: 38px;
line-height: 14pt;
text-align: justify;
}

 

Why is the page displayed in two different way even though they are accessing the same CSS file?

Share this post

Link to post
Share on other sites
Posted

Some of your styles are not closed with a semi-colon. Also, whilst applying a background to the html tag does work, you're better off applying it to the body. Could you possibly post the html as well? I'm struggling to see where those curved borders are coming from, could you post background.png and mainmid.png?

Share this post

Link to post
Share on other sites
Posted (edited)

Have to agree with Shorty on this one. Also sorry to say but you will have to check for rendering issues with the I.E platform. There is a great website that lets you see how things render in different browsers without having to download them all. I'll see if I can find it and post back.

 

I haven't tried it out yet but here it is http://www.xenocode.com/browsers/

Edited by Ten10

Share this post

Link to post
Share on other sites
Posted (edited)
Thats weird. Tried using a different browser?

 

Yep I've tried Safari and it appears the same :(

 

 

 

Some of your styles are not closed with a semi-colon. Also, whilst applying a background to the html tag does work, you're better off applying it to the body. Could you possibly post the html as well? I'm struggling to see where those curved borders are coming from, could you post background.png and mainmid.png?

 

Thanks, I've just realised that the are some semi-colons. But it's strange how is appears to display it correctly whilst using Edit CSS of the web developers tool bar.

 

The background (not sure if this will work, in terms of the repeat function)

background.png

Main Mid

mainmid.png

Top (The Curve)

maintop.png

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Paul Todd - Indepentant Opticians Lincoln</title>
<link rel="stylesheet" href="css/default.css" />
</head>

<body>
<div id="container">
   	<div id="header">
       	<img src="images/logo.png" alt="Paul Todd Opticians" />

           <div id="nav">
			<img src="images/home.png" alt="Home" class="navimg"/>
               <img src="images/eyecare.png" alt="Eyecare" class="navimg" />
               <img src="images/services.png" alt="Service" class="navimg" />
               <img src="images/staff.png" alt="Staff" class="navimg" />
               <img src="images/contact.png" alt="Contact" class="navimg" />
               <img src="images/maintop.png" alt="Top" class="maintop"/>
           </div><!--end nav-->
       </div><!--end header-->

       <div id="maincontainer">

       <div id="maincontent">
       	<img src="images/introduction.png" alt="Introduction" />
           <p>3rd of March 1983 was my big day. I had decided I had had enough of dealing with patients on the terms of the large multiples who I had trained with and worked for since 1975. It had been whilst working in Southampton after returning from Australia back-packing that I made up my mind about what I wanted to try and achieve, an independent practice that listened to each person as an individual and gave them good professional advice about what was available to satisfy their personal requirements. This has always remained my ethos over the years. I have had to ensure that I am always up to date regarding products and equipment, that in itself has given me the confidence to ensure my patients were given the best products at the best price. I have often been courted by manufacturers to only deal solely in their products, but have always felt like it was selling my soul to the devil. I like to sleep at night knowing I can buy what I want, from where I want - that’s why I became independent! Over the years we have carved out a niche in the market place for patients who suffer from ‘Visual Stress’ (I much prefer that heading to ‘Dyslexia’) and helped many hundreds of both children and adults with their difficulties in reading and writing that they experience with this condition. Some come to us from overseas (Denmark, Sweden, Italy to name a few) so word spreads far and wide about our services! The years have changed the business and I feel that we are nearly at what I wanted to achieve 26 years ago. I’m afraid my standards are high and I do not think I will ever get there - you never know, maybe one day!
           </p>
           <img src="images/footer.png" alt="Footer" />

	</div><!--end maincontent-->

       <div id="rightcontent">
       	<img src="images/latestnews.png" alt="Latest News" />
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin. Curabitur tincidunt semper turpis. Sed et orci eu leo congue euismod. Nam sed sapien. Vestibulum dictum. Maecenas eu arcu sed nibh porttitor dapibus. Aenean porttitor congue quam. Curabitur ullamcorper volutpat mi. Duis ac dui sit amet nisl adipiscing imperdiet. Nullam condimentum, sem non imperdiet faucibus, ligula est rhoncus arcu, nec ultricies nibh turpis rhoncus pede. Maecenas lectus. Duis non enim eget tellus dictum dapibus. 
           </p>
           <img src="images/newsletter.png" alt="Newsletter" />
           <p>Our Bi-Yearly Newsletter will ensure you are up to date with the latest eye care and treatments. Simply enter your e-mail address below and hit subscribe.   
           </p>

	</div><!--end right content-->
       </div><!--end maincontent-->
       <img src="images/mainbottom.png" alt="Top" class="mainbottom"/>
   </div><!--end container-->
</body>
</html>

 

 

 

 

Have to agree with Shorty on this one. Also sorry to say but you will have to check for rendering issues with the I.E platform. There is a great website that lets you see how things render in different browsers without having to download them all. I'll see if I can find it and post back.

 

I haven't tried it out yet but here it is http://www.xenocode.com/browsers/

 

Thanks for that link, I was going to struggle testing the website in IE (working on a mac, without access to a Windows PC)

Edited by fex
Automerged Doublepost

Share this post

Link to post
Share on other sites
Posted

I ran it through a validator and fixed some errors, here's the fixed code:

 

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

a {
text-decoration: none;
color: black;
}

a:hover {
text-decoration: underline;
}

/* MAIN STYLES */

html {
background: url(images/background.png);
}

#container {
width: 905px;
background-color: grey;
margin: 3em auto;
}

#header {
overflow: hidden;
height: 100%; /* NEEDED IE6 */
}

#header img {
float: left;
}

#nav {
float: right;
position: relative;
}

#nav img.navimg {
top: 50px;
}

#maincontainer {
margin-top: 0px;
overflow: hidden;
background: url(images/mainmid.png);
}

#maincontent {
float: left;
width: 550px;
margin-left: 38px;
margin-top: 10px;
}

#maincontent p {
color: #818181;
font-family: verdana;
font-size: 12px;
margin-right: 38px;
line-height: 14pt;
text-align: justify;
}

#rightcontent {
margin-top: 10px;
}

#rightcontent p {
color: #818181;
font-family: verdana;
font-size: 12px;
margin-right: 38px;
line-height: 14pt;
text-align: justify;
}

 

You had 

background: grey;

in 

#container

which should have been 

background-color: grey;

but the validator complained there's no such value as "grey" so I suggest finding out the RGB code for grey.

 

Not sure if it fixes the problem though.

Share this post

Link to post
Share on other sites
Posted (edited)

 

You had background: grey;

 

Thanks, I added that grey to allow me to get a feel for the space of the Div (just incase that confused anyone)

 

Hmmmm I've just deleted the whole of my CSS file and typed in the following into Dreamweaver and it has updated with the background. When I place a # in front of the body then it doesn't work. Should the # be there?

 

body

{

background-image:

url('http://zookai.co.uk/images/background.png');

background-repeat: repeat

}

Edited by fex

Share this post

Link to post
Share on other sites
Posted

I believe it is because you must opt for the American spelling of gray.

Share this post

Link to post
Share on other sites
Posted
Thanks, I added that grey to allow me to get a feel for the space of the Div (just incase that confused anyone)

 

Hmmmm I've just deleted the whole of my CSS file and typed in the following into Dreamweaver and it has updated with the background. When I place a # in front of the body then it doesn't work. Should the # be there?

 

body

{

background-image:

url('http://zookai.co.uk/images/background.png');

background-repeat: repeat

}

 

No it shouldn't be there for the body. It would if you gave the body an ID like

 

<body id="blah">

 

Then the css would be

 

#blah

Share this post

Link to post
Share on other sites
Posted
You had 
background: grey;

in 

#container

which should have been 

background-color: grey;

but the validator complained there's no such value as "grey" so I suggest finding out the RGB code for grey.

 

Not sure if it fixes the problem though.

 

Gray is the correct spelling in HTML (not grey - but somebody mentioned this before) though I have to say that the 'background' attribute can be used in this way as well. You don't have to mention the color, but it makes more sense if color is the only thing you're defining.

 

If, for example, you'de use a background image and color you could use

 

background: url("image.jpg") gray;

 

You can use these tags more loosely, so changing background to the more specific background-color doesn't really make a difference.

 

Correct me if I'm wrong, though - I'm the first to admit that CSS isn't fully integrated into my system yet, but I think that this was what I learned this year at school (we got very detailed class on XHTML and CSS). Also, I teached it to my fellow-students because the teachers were actually too much in geek-speak-mode.

Share this post

Link to post
Share on other sites
Sign in to follow this  
Followers 0
Go To Topic Listing General Chit Chat
×