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 <!-- m --><a class="postlink" href="http://design.giggledesign.com">http://design.giggledesign.com</a><!-- m -->
css file url: <!-- m --><a class="postlink" href="http://design.giggledesign.com/common/css/default01.css">http://design.giggledesign.com/common/css/default01.css</a><!-- m -->
does anybody have a clue what is going wrong??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 (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/00009.php">http://www.ryanbrill.com/archives/00009.php</a><!-- m -->). If you need additional help once you've read that, let us know.
thanks, i think it's time for a read!
i will keep you posted.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?http://www.w3schools.com/css/css_reference.asp#backgroundthank 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!!Happy to help... and remember, if you have any other questions, just shout.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(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main01a.gif">http://design.giggledesign.com/images/main01a.gif</a><!-- m -->) no-repeat top left;
background: url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main02a.gif">http://design.giggledesign.com/images/main02a.gif</a><!-- m -->) no-repeat bottom right;
}
is there an alternative?This, perhaps?
<style type="text/css">
html {
background: transparent url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main02a.gif">http://design.giggledesign.com/images/main02a.gif</a><!-- m -->) no-repeat bottom right;
}
body {
margin: 0;
padding: 0;
background: transparent url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main01a.gif">http://design.giggledesign.com/images/main01a.gif</a><!-- m -->) no-repeat top left;
}
</style>nope that didn't work either
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(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main01a.gif">http://design.giggledesign.com/images/main01a.gif</a><!-- m -->) no-repeat top left;
}
#content {
background: transparent url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main02a.gif">http://design.giggledesign.com/images/main02a.gif</a><!-- m -->) 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>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.
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 <!-- m --><a class="postlink" href="http://design.giggledesign.com">http://design.giggledesign.com</a><!-- m -->
css file url: <!-- m --><a class="postlink" href="http://design.giggledesign.com/common/css/default01.css">http://design.giggledesign.com/common/css/default01.css</a><!-- m -->
does anybody have a clue what is going wrong??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 (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/00009.php">http://www.ryanbrill.com/archives/00009.php</a><!-- m -->). If you need additional help once you've read that, let us know.
thanks, i think it's time for a read!i will keep you posted.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?http://www.w3schools.com/css/css_reference.asp#backgroundthank 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!!Happy to help... and remember, if you have any other questions, just shout.
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(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main01a.gif">http://design.giggledesign.com/images/main01a.gif</a><!-- m -->) no-repeat top left;
background: url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main02a.gif">http://design.giggledesign.com/images/main02a.gif</a><!-- m -->) no-repeat bottom right;
}
is there an alternative?This, perhaps?
<style type="text/css">
html {
background: transparent url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main02a.gif">http://design.giggledesign.com/images/main02a.gif</a><!-- m -->) no-repeat bottom right;
}
body {
margin: 0;
padding: 0;
background: transparent url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main01a.gif">http://design.giggledesign.com/images/main01a.gif</a><!-- m -->) no-repeat top left;
}
</style>nope that didn't work either
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(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main01a.gif">http://design.giggledesign.com/images/main01a.gif</a><!-- m -->) no-repeat top left;
}
#content {
background: transparent url(<!-- m --><a class="postlink" href="http://design.giggledesign.com/images/main02a.gif">http://design.giggledesign.com/images/main02a.gif</a><!-- m -->) 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>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.