PDA

View Full Version : borders!



gucci09
Jan 16th, 2007, 02:14 PM
hey everyone. so for some reason firefox wanted to be lilke IE and is screwing up now too. when i put borders around my divs it like moves the div down and puts a huge black hole in the middle. and also my if IE6 thing isnt working either. if anyone could help that would be great. here is my code.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

<link href="jvdt.css" rel="Stylesheet" type="text/css" />

<!--[if IE 6]>
<link href="jvdtie.css" rel="Stylesheet" type="text/css" />
<![endif]-->


<body>

<title>JVDT - CSS Test</title>


<div id=container>
<div id="menu"><center>yellow</center></div>
<div id="tree">green
blahbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<br />
valh
<br />
afadfdfa
<br />
dffad
<br />
fadf
<br />
dafa
<br />
dfadfaf
<br />
dafadf
<br />
afdfad
<br />
fadfa
<br />
dfadfad
<br />
fdf
<br />
fdfadfdaf
<br />
d
<br />
fda
<br />
fad
<br />
f
<br />
ad
<br />
fad
<br />
f
<br />
ad
<br />
fa
<br />
d
<br />
fa
<br />
df
<br />
ad
fd
fa
d
f
daf
afd
adsf

</div>
<div id="input">orange
adkfljadl;f
<br />
adfadfdaf
<br />
adfadfadfad
<br />
afdafdfdaf
<br />
hthgjyud
<br />
agdfgfagfafg
<br />
adfadffdafgasghg<br />
<br />
afdedf
<br />
<br />
adfadfadfdhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjhhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
<br />
adfadffhfgd
<br />
adfahgrfd
<br />
fddagf
<br />
dfadfag
<br />
afdafafsc
<br />
adfdadfdfa
<br />
daffaaf

</div>
<div id="description">lightblue
dafdfdsxd<br />
<br />
dfdafdfhhhhhhhhhhhhhhhhhhhhhhhhhhggggggggggggggggggggdffddddddddddddddddddddddddddddddddd
<br />
afadffad
<br />
adfadfadfd
<br />
adfafadfgdaf
<br />
adfafdfa
<br />
afdfadfdag
<br />
dafdffdadfag
<br />
dfa
<br />
dfad
<br />
dagafg
<br />
dfgfhghh
<br />
dfadhfhsf
<br />
fagafhafg
<br />
fdgdfgagg
<br />
agshhgfghs
<br />
gffdgfhgfh
<br />
agfhhgs
<br />
dgadgharf
<br />
dgfdgh
<br />
dgdagfgdagda
</div>
</div>
</body>
</html>

CSS for IE



html,body{
height: 100-1px%;
/*width: 99%*/
min-height:600px;
/*width:expression(document.body.clientWidth < 300? "300px" : "auto");
*/




}
* {

margin: 0;
padding: 0;
min-height:600px;


}


#container {
height:100-1px%;
width: 100-1px%;
background: #000000;
min-height:600px;






}

#menu {
width: 100%;
height:10%;
position:relative;
background: yellow;


}
#tree {
float:left;
width: 30%;
height: 90%;
background: green;
overflow:auto;


}
#input {
width: 70%;
height: 60%;
float: right;
position:relative;
background: orange;
overflow:auto;

}
#description {
width: 70%;
height: 30%;
float: right;
position:relative;
background: lightblue;
overflow:auto;
}


and my CSS for everything else:


html, body {
height: 100%;
width: 100%;

}
* {
margin: 0;
padding: 0;
}
#container {
height:100%;
width: 100%;
background: #000000;
min-width: 1024px;
min-height: 768px;
border: 2px solid white;

}
#menu {
width: 100%;
height:10%;
position:relative;
background-color: #ffff00;
border-left: 2px solid white;

}
#tree {
float:left;
width: 30%;
height: 90%;
background-color: #008000;
border-bottom: 2px solid white;
border-top: 2px solid white;
border-right: 1px solid white;

}
#input {
width: 70%;
height: 60%;
float: right;
position:relative;
background-color: #ffa500;
overflow:auto;
border-bottom: 2px solid white;
border-top: 2px solid white;

}
#description {
width: 70%;
height: 30%;
float: right;
position:relative;
background-color: #add8e6;
overflow:auto;
border-bottom: 2px solid white;
border-top: 2px solid white;

}

ronaldb66
Jan 16th, 2007, 03:51 PM
You could start with validating: the head section misses an end tag and the title element should not be in the body section but in the head. It may not solve all your problems, but starting with a clean slate takes away any chance of errors caused by buggy markup.

Furthermore, a link to the page online would help a lot so people can see for themselves what the rendering looks like.

And this:

height: 100-1px% certainly isn't part of any current W3C recommendation.

Arbitrator
Jan 16th, 2007, 03:51 PM
You do know that a combined width of 100% plus the X width of the borders is 100% plus X wide, right? This means that your boxes are taking up more than 100% of the space and no longer fit when borders are added. To circumvent this issue, throw another div element—with no width specified since they’ll expand automatically—into each of the layout div elements and apply the borders to these inner div elements. Specifying the height is another issue though. If you have a fixed height just take the original height and subtract the combined width of the top and bottom borders; this value will be the height you should specify for each of the inner div elements. If the height for any of the outer div elements are not fixed, however, then you’re in for some trouble.

There are some other issues you should address, by the way. For example, the XHTML 1.1 doctype declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html) should not be used with any browser that does not understand XHTML (Internet Explorer). Don’t go for 1.1 just because the number is bigger than 1.0; I’m betting that you can’t even tell me what the differences are between 1.1 and 1.0. Anyway, a need to support Internet Explorer also means a need to not use 1.1. I would recommend the HTML 4.01 declaration, since you’re doing old school things like using the center element and omitting the closing head tag. At the very least, you should downgrade to XHTML 1.0. Then validate against the doctype (http://validator.w3.org/) to ensure that your code contains no errors.

The other issue involves “CSS” like this: “height: 100-1px%”. You can’t use mathematical operations as values; even Internet Explorer doesn’t understand that.

Simultaneous post. :p

gucci09
Jan 16th, 2007, 04:15 PM
wow i wish i understood half of that. im really new to this so that was way over my head. so that is y i made little mistakes like not closing my head and stuff. not bc of was using an oldschool convention but just bc im not really that good yet lol. anyway. ab having a link. i cannot give a link bc that would mean allowing access into a private server and i would get severly yelled at. i will fix some of those errors though but i dont think i understand the div inside the div elements thing. like i have that container div that goes around the outside of everything. do i need to add more than that?

Graft-Creative
Jan 16th, 2007, 07:45 PM
i cannot give a link bc that would mean allowing access into a private server and i would get severly yelled at.

ok, in that case, you could make things a tad bit easier for us by embedding your stylesheet into your html page (a lot of developers do this as standard practise anyway, sweeping the stylesheet out into an external file only once everything is working ok)- that way we can just copy and paste all your code into a text editor, save and then preview.

..speaking of text editors, which one are you using? If you're like me, and prone to typos and accidentally missing things out, then you need a good text editor that has error highlighting - I can recommend SciTE (http://www.scintilla.org/SciTE.html) as being a good one (well I use it anyway :) )

Ok, back on topic, your IE thing:



/*width:expression(document.body.clientWidth < 300? "300px" : "auto");
*/


This won't work as you have made it a comment.

I'll just explain a little what this expression is saying, basically:

if the width is less than 300px, set it to 300px

simple enough, however you need to avoid having these as equal values, as this can throw IE 6 and below into an eternal loop trying to calculate one value against the other - try making the first value a bit higher, say 305.

Hope that helps, stick with it, you're doing just fine :thumbsup:

Kind regards,

Gary