Jump to content

<div> width and height


Guest Vitaquosus

Recommended Posts

Guest Vitaquosus

I am a rookie with CSS having spent years with C++ OS == XP professional URL of problemhttp://www.wyght.com/warren/ieTMbanner.htmlURL of CSS codehttp://www.wyght.com/htdocs/warren/testBanner.cssI want to be able to position the <div> tags in a specific spot on the webpage. I cannot seem to get them to be the height, width or placement I want. On IE they are completely different than on Firefox. I have tried many different things and have search for a solution but as of yet have not found one. Could someone please tell me what is incorrect with my CSS code? ThanksBriefly the yellow <div> is the same dieth as the purple <div> which is at 3% and the yellow 1%

Link to comment
Share on other sites

Well, the first thing you need to learn with CSS is that it's not supported the same way in IE, Firefox and Opera. Different browsers show the same code with differences, whether big ones or small ones due to the lack of support of some features or a variety of bugs.Of course, in some cases like this one, there are bigger differences to consider.In this particular case, what I can say is that IE doesn't support position:fixed, but Firefox does. I have no idea if the leading zero in ".BannerPurple" makes any differences, but for the sake of strictness, don't use leading zeros.I see you have tryed to set the body's height to 100%. Because of different browser issues, there's a bit more to achieving this in all browsers. Create a div with an id attribute named (for example) wrapper at the top (and close it at the bottom respectivly) and replace

body{	 height: 100%;}

with this:

html, body{height: 100%;}*html{height: auto;}#wrapper{height: 100%;}

That way, the inner divs should stretch smoothly enough.Try changing theese for starters and then see what new issues you'll have.

Link to comment
Share on other sites

Here is your CSS code with some comments in it. Do the few changes and get back to us. Also, what kind of layout do you want? Two col with a header?Good luck

body{	 height: 100%;}div{ position: fixed; /*Not supported by IE, but there are workaround. You sure u need a fixed position?*/}.BannerGreen{	 background-color: #004401; top: 0;/*I have removed the % sign since it is not necissary when the value is 0*/ height: 9%; width: 100%; z-index: 1;}.BannerPurple{ background-color: #660066; top: 09%;/*Not valid with the leading 0, you have to change it*/ height: 3%; width: 100%; z-index: 2; }.BannerGold{ background-color: #FFCC00; top: 12%; height: 1%; width: 100%; z-index: 3;}

Link to comment
Share on other sites

Different browsers show the same code with differences, whether big ones or small ones due to the lack of support of some features or a variety of bugs.
Just a quick point on this. Most of the time it is not a bug (IE just doesn't support a lot), a lot of the time it's because the CSS spec does not specifically say exactly what to do in every situation, so browser vendors do it how they want or how they think it should be done. Not everyone agrees.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...