I've got this test page I'm working on:
<!-- m --><a class="postlink" href="http://www.the17thdegree.com/BottgersMarine/test0.html">http://www.the17thdegree.com/BottgersMarine/test0.html</a><!-- m -->
and I would like to see what it looks like with the same big black curve in the top left corner in the bottom right corner. Because I already have a background image for the mainContent div, I wrapped the maincontent div in another div and set another background image in that div. However, it is not to be seen. Any explainations?
Also, I know that this is only currently working for IE, but I'm slowly fixing all that to accomodate all browsers. this doesn't seem to be related to my problem however.Actually, you've got the whole process backwards. Design for Mozilla and Opera 7 first, then hack and chew up the CSS to work in Internet Explorer. It can be done.
1. Validate your markup. I viewed the source and noticed forward slashes at the end of <img> tags and the sort. If you are using XHTML syntax, specify an XHTML doctype.
<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_doctype.asp">http://www.w3schools.com/tags/tag_doctype.asp</a><!-- m -->
Then specify a correct character set definition:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
This will put browsers released after 2000 (roughly) into standards compliance mode. You'll, if anything, see more predictable results in Internet Explorer. Among other things, IE gets the box model wrong when working in Quirks mode (HTML document without proper doctype tag and character set definition).
The <? xml ... ?> declaration at the beginning of XML or XHTML 1.1 documents puts IE into quirks mode too.
To your original question, the background for mainContentWrapper may not be showing through because it's child, mainContent, has a background color specified. Below is a kind of explanation of the two elements and their background properties.
mainContent ------ background image ------
mainContent ------ background color ------
mainContentWrapper ------ background image
When writing the properties for background the short-hand way, it best to specify all the background properties:
#maincontent {
background: transparent url(topLeftCorner.gif) no-repeat attachment -180px 0px; /* Don't forget the unit of measure */
float:right;
width:619px;
text-align:center;
padding:0px; /* Don't forget the unit of measure */
}
attachment can be: scroll or fixed.
One last thing you should do is break up the stylesheets into CSS 2.0 and CSS 1.0 styles.
CSS 2.0 styles should be imported via the @import method:
<head>
<style type="text/css">
<!--
@import "url/to/stylesheet2.css";
-->
</style>
CSS 1.0 styles should be imported via the link tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"url/to/stylesheet1.css" />
This will keep your advanced CSS away from fourth generation browsers (IE 4 and NN4.x).
Secondly, it's easier to get around IE 5.x's box model but by using two DIVs to create a container. Right now I gotta jet. I have to go to class. I'll add more later.Ok, a few comments.
I realize that I should usually design for more standard compliant browsers first, but I didn't, but that isn't the point.
I realize that I have no doctype or what not, but again, as I posted, it doesn't make any noticable difference on the page. Although, I probably should have done it.
As for my original question, maincontentWrapper is on the outside of maincontent, so doesn't that mean that maincontent is the child of maincontentWrapper? Unless I have a completly backwards concept of parent/child relationships, which I guess is possible.
Also, just as a point, your CSS will validate if you don't have the unit of measure on units that have a value of 0.
So I guess I'm still wondering what the problem is.for reference, I've updated the file to have a doctype. Everything is valid, however it says that i'm missing somethign before the end </head> It doesn't say what though. perhaps it's part of the bugs with validating xhtml, who knows.Just hacking around a little but this is pretty close and it works with ie and moz.
#maincontentWrapper {
background: url(bottomRightCorner.gif) no-repeat bottom right;
width: 100%; height: 400px;
}
#maincontent {
background: url(topLeftCorner.gif) no-repeat top left;
}I got your code to validate as XHTML 1.1. I did a fair amount of rearranging in the CSS. I was able to get rid of the "hacks" to recalculate the widths of elements to account for IE 5.x/PC's incorrect CSS box model.
I even got the blasted background images to display like you wanted
And if I came off a bit brash in my last post, I apologize. I didn't mean to. I really dig the design. It looks sharp.
I found it easiest to get around the IE5 box model bug by placing the width in CSS in a wrapper div and then placing things like padding, borders, and margins in a child div.
<style type="text/css">
<!--
#parent {
width: 100px;
/*
No padding, margins, or borders here. You can add
things like font, color, backgrounds, etc. Only the stuff
that has nothing to do with the CSS box model, save for width.
*/
}
#child {
/*
Place borders, padding, and margins here.
BUT NO WIDTH.
*/
}
-->
</style>
In HTML
<div id="parent">
<div id="child"> </div>
</div>
Inherent properties of block level elements
Block level elements with no CSS are as wide as they can be and only as tall as they need to be. If you float a block level element, it is as wide as the longest unwrapped line of text and as tall as the tallest thing inside it.
#parent is 100 pixels wide. #child has no width specified in CSS, but it can have paddings, borders and margins set. If you don't set the width of #child, the browser will calculate the width for you, minus the padding, margins, and borders. In the case of IE5.x/PC, it still calculates the width for you, thus negating the IE5.x/PC box model bug.
And it's 2:46 in the AM, and God I hope I made some sense at all.
I've attached the working code. It works on the following browsers:
IE6 WinXP SP1
Mozilla 1.5
Firebird .7
Opera 6.04It works on the following browsers:
Win 2000
Opera 7.2
NS 7.01
IE 6
Firebird .7
Mac OS 9.1
Mozilla 1.2.1
NS 7.02
IE 5.0 (2022) (except the logo doesn't appear).
I'll leave the logo problem up to you!I really appreciate you taking the time to help me out with my design. I'm just hoping that the people i'm doing this for will like it, regardless, I like it, so that's got to count for something.
and with the logo not showing up, hmm, i'll have to think about that one.
thanks again for your help.
<!-- m --><a class="postlink" href="http://www.the17thdegree.com/BottgersMarine/test0.html">http://www.the17thdegree.com/BottgersMarine/test0.html</a><!-- m -->
and I would like to see what it looks like with the same big black curve in the top left corner in the bottom right corner. Because I already have a background image for the mainContent div, I wrapped the maincontent div in another div and set another background image in that div. However, it is not to be seen. Any explainations?
Also, I know that this is only currently working for IE, but I'm slowly fixing all that to accomodate all browsers. this doesn't seem to be related to my problem however.Actually, you've got the whole process backwards. Design for Mozilla and Opera 7 first, then hack and chew up the CSS to work in Internet Explorer. It can be done.
1. Validate your markup. I viewed the source and noticed forward slashes at the end of <img> tags and the sort. If you are using XHTML syntax, specify an XHTML doctype.
<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_doctype.asp">http://www.w3schools.com/tags/tag_doctype.asp</a><!-- m -->
Then specify a correct character set definition:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
This will put browsers released after 2000 (roughly) into standards compliance mode. You'll, if anything, see more predictable results in Internet Explorer. Among other things, IE gets the box model wrong when working in Quirks mode (HTML document without proper doctype tag and character set definition).
The <? xml ... ?> declaration at the beginning of XML or XHTML 1.1 documents puts IE into quirks mode too.
To your original question, the background for mainContentWrapper may not be showing through because it's child, mainContent, has a background color specified. Below is a kind of explanation of the two elements and their background properties.
mainContent ------ background image ------
mainContent ------ background color ------
mainContentWrapper ------ background image
When writing the properties for background the short-hand way, it best to specify all the background properties:
#maincontent {
background: transparent url(topLeftCorner.gif) no-repeat attachment -180px 0px; /* Don't forget the unit of measure */
float:right;
width:619px;
text-align:center;
padding:0px; /* Don't forget the unit of measure */
}
attachment can be: scroll or fixed.
One last thing you should do is break up the stylesheets into CSS 2.0 and CSS 1.0 styles.
CSS 2.0 styles should be imported via the @import method:
<head>
<style type="text/css">
<!--
@import "url/to/stylesheet2.css";
-->
</style>
CSS 1.0 styles should be imported via the link tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"url/to/stylesheet1.css" />
This will keep your advanced CSS away from fourth generation browsers (IE 4 and NN4.x).
Secondly, it's easier to get around IE 5.x's box model but by using two DIVs to create a container. Right now I gotta jet. I have to go to class. I'll add more later.Ok, a few comments.
I realize that I should usually design for more standard compliant browsers first, but I didn't, but that isn't the point.
I realize that I have no doctype or what not, but again, as I posted, it doesn't make any noticable difference on the page. Although, I probably should have done it.
As for my original question, maincontentWrapper is on the outside of maincontent, so doesn't that mean that maincontent is the child of maincontentWrapper? Unless I have a completly backwards concept of parent/child relationships, which I guess is possible.
Also, just as a point, your CSS will validate if you don't have the unit of measure on units that have a value of 0.
So I guess I'm still wondering what the problem is.for reference, I've updated the file to have a doctype. Everything is valid, however it says that i'm missing somethign before the end </head> It doesn't say what though. perhaps it's part of the bugs with validating xhtml, who knows.Just hacking around a little but this is pretty close and it works with ie and moz.
#maincontentWrapper {
background: url(bottomRightCorner.gif) no-repeat bottom right;
width: 100%; height: 400px;
}
#maincontent {
background: url(topLeftCorner.gif) no-repeat top left;
}I got your code to validate as XHTML 1.1. I did a fair amount of rearranging in the CSS. I was able to get rid of the "hacks" to recalculate the widths of elements to account for IE 5.x/PC's incorrect CSS box model.
I even got the blasted background images to display like you wanted
And if I came off a bit brash in my last post, I apologize. I didn't mean to. I really dig the design. It looks sharp.
I found it easiest to get around the IE5 box model bug by placing the width in CSS in a wrapper div and then placing things like padding, borders, and margins in a child div.
<style type="text/css">
<!--
#parent {
width: 100px;
/*
No padding, margins, or borders here. You can add
things like font, color, backgrounds, etc. Only the stuff
that has nothing to do with the CSS box model, save for width.
*/
}
#child {
/*
Place borders, padding, and margins here.
BUT NO WIDTH.
*/
}
-->
</style>
In HTML
<div id="parent">
<div id="child"> </div>
</div>
Inherent properties of block level elements
Block level elements with no CSS are as wide as they can be and only as tall as they need to be. If you float a block level element, it is as wide as the longest unwrapped line of text and as tall as the tallest thing inside it.
#parent is 100 pixels wide. #child has no width specified in CSS, but it can have paddings, borders and margins set. If you don't set the width of #child, the browser will calculate the width for you, minus the padding, margins, and borders. In the case of IE5.x/PC, it still calculates the width for you, thus negating the IE5.x/PC box model bug.
And it's 2:46 in the AM, and God I hope I made some sense at all.
I've attached the working code. It works on the following browsers:
IE6 WinXP SP1
Mozilla 1.5
Firebird .7
Opera 6.04It works on the following browsers:
Win 2000
Opera 7.2
NS 7.01
IE 6
Firebird .7
Mac OS 9.1
Mozilla 1.2.1
NS 7.02
IE 5.0 (2022) (except the logo doesn't appear).
I'll leave the logo problem up to you!I really appreciate you taking the time to help me out with my design. I'm just hoping that the people i'm doing this for will like it, regardless, I like it, so that's got to count for something.
and with the logo not showing up, hmm, i'll have to think about that one.
thanks again for your help.