PDA

Click to See Complete Forum and Search --> : I thought CSS helped...............!

giggledesign
12-15-2003, 12:07 PM
i am having some problems with my CSS!

i have used a blue robot layout resovoir CSS page template and have edited it to match my personal prfference. i uploaded my files and viewed them in both Internet Explorer and Mozilla.

it looks fine, how iwant it in internet explorer but Mozilla is not reading it correctley.

the url http://design.giggledesign.com

css file url: http://design.giggledesign.com/common/css/default01.css


does anybody have a clue what is going wrong??
pyro
12-15-2003, 12:13 PM
Mozilla is actually correct. You are specifying a left margin for the content area that is too small. First, you might want to learn how widths are calculated (http://www.ryanbrill.com/archives/00009.php). If you need additional help once you've read that, let us know. :)
giggledesign
12-15-2003, 12:16 PM
thanks, i think it's time for a read!

i will keep you posted.
giggledesign
12-15-2003, 12:29 PM
does anybody know how i could put a background image into the body using CSS whilst keeping it fixed and no repeat. in the top left



body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
}



what's missing?
spufi
12-15-2003, 12:49 PM
http://www.w3schools.com/css/css_reference.asp#background
giggledesign
12-15-2003, 12:52 PM
thank you very much!

i have sorted out the background problem but i am still learning about widths and hieghts. thanks for now guys you have helped me greatly!!
pyro
12-15-2003, 12:53 PM
Happy to help... and remember, if you have any other questions, just shout. :)
giggledesign
12-15-2003, 01:21 PM
ok,

can you have more than one image representation in the body tag?

ie.

body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background: url(http://design.giggledesign.com/images/main01a.gif) no-repeat top left;
background: url(http://design.giggledesign.com/images/main02a.gif) no-repeat bottom right;

}




is there an alternative?
pyro
12-15-2003, 01:27 PM
This, perhaps?

<style type="text/css">
html {
background: transparent url(http://design.giggledesign.com/images/main02a.gif) no-repeat bottom right;
}
body {
margin: 0;
padding: 0;
background: transparent url(http://design.giggledesign.com/images/main01a.gif) no-repeat top left;
}
</style>
giggledesign
12-15-2003, 01:37 PM
nope that didn't work either

:(
ray326
12-15-2003, 07:14 PM
Moz REALLY didn't like that HTML background for some reason. Does this dog hunt?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: transparent url(http://design.giggledesign.com/images/main01a.gif) no-repeat top left;
}
#content {
background: transparent url(http://design.giggledesign.com/images/main02a.gif) no-repeat bottom right;
margin: 0;
padding: 2em;
height: 600px;
border: 1px dotted black;
}
</style>
</head>
<body>
<div id="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</body>
</html>
spufi
12-16-2003, 10:38 AM
Something I have thought about trying, but haven't done, and thus it isn't tested, is using multiple class names within the same tag.

.class1 { CSS }
.class2 { CSS }

<div class="class1 class2">

I've seen people code something like that before to get both classes to work in the same tag and I wondered if it worked for background images. I have a layout idea and without the 2-in-1 idea, I can't think of any other way of doing it.