Forum Moderators: not2easy
A page wont render in IE, moz, opera. Simple stacked div again. I have searched through WebmasterWorld to no avail and have tried many things. I get the old not lining up on the right hand side.
I have tried
1. full and short doctype (full type breaks it even more in IE)
2. Encasing all in a div
3. using quotes around font tags with more than one word
4. Including this at the end of the CSS (thansk SuzyUK)
p, h1, h2, h3, h4, h5, h6,{margin: 0; padding: 0 0 10px 0}
5. Crying (that did not help - joke I am burly gimp who does not cry)
Any suggestions?
Nick
All the lists display inline appart from #left and #right. The logo is floated right as is image in divtwo.
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<body>
<div id="divone">
<H1><img class="logo" border="0" src="img/logo.jpg">Some Title</H1>
</div>
<div id="divtwo">
<a href="#"><img class="logo" border="0" src="#"></a>
<ul>
<li>» <a href="#">1</a></li>
<li>» <a href="#">2</a></li>
</ul>
</div>
<div id="divthree"><p><b>Subcategories in United Kingdom :</b><br></p>
<div id="left">
<ul><li>»<a HREF="#">England</a></li>
<li>»<a HREF="#">Ireland</a></li></ul>
</div>
<div id="right">
<ul>
<li>»<a HREF="#">Scotland</a></li>
<li>»<a HREF="#">Wales</a></li>
</ul>
</div>
</div>
<div id="divfour">
<p><b>Results 1 - 2 of 2 found in United Kingdom</p>
</div><div id="divfive">
<ul>
<li>1</a></li>
<li>2</a></li>
<li>3t</a></li>
</ul>
</BODY>
</HTML>
body {
margin-right: 5%;
margin-left: 5%;
padding: 0px
}
#divone {
width: 100%;
margin:0px;
background-color: #FFFFFF;
vertical-align: middle;
padding-left: 3px;
padding-top: 5px;
padding-bottom: 5px;
color: #000000;
border: 1px solid #000000;
float: left;
clear: none
}
#divone h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
display: inline;
margin:0px;
color: #77c361
}
#divtwo {
margin: 0px;
width:100%;
background-color: #77c361;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding-bottom: 3px;
padding-top: 3px;
font-size: 70%;
float: left;
clear: none
}
#divtwo a {
margin:0px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-weight: bold
}
#divtwo a:hover {
margin:0px;
color: #FFFFFF
}
#divthree {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin: 0px;
padding: 3px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-size: 80%;
float: left
}
#left {
float: left;
width: 45%;
margin: 0px;
}
#right {
float: left;
width: 45%;
margin: 0px;
}
[edited by: ukgimp at 2:04 pm (utc) on Nov. 4, 2003]
Nick
You may need to put some elements of your style sheet in the head
UK... I'm guessing here because that code seems to be lining up.. so I'm guessing there is something that you have stripped out of <divone> or <divtwo> that is also 100% wide?
Q.... any reason why you have these two divs float:left; clear: none; when they would stack up easier and be 100% wide by default just by letting them remain static..
Suzy
Does that make sense?
A I dont know. I have hacked and hacked and the float left thing seemeed to work. As I remeber when I floated left they did not overlap top to bottom. Is that the wrong way about it then?
And I've got it corrected now.. except for the floating lists in <divthree> but give me a minute..
The <divone>, <divtwo> floats are 100% wide, that is 100% of the body then you've applied different margins and/or padding which is triggering the box model thing!
try this for one and two... let them keep their default static position, and they will automatically be 100% regardless of padding/margins... {remove float, width, and clear properties)
#divone {
margin:0px;
background-color: #FFFFFF;
vertical-align: middle;
padding-left: 3px;
padding-top: 5px;
padding-bottom: 5px;
color: #000000;
border: 1px solid #000000;
}
#divtwo {
margin: 0px;
background-color: #77c361;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding-bottom: 3px;
padding-top: 3px;
font-size: 70%;
}
Suzy
Doctype I'm using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
THEN:
<html>
<head>
<style type="text/css">
html {margin: 0; padding: 0;}
body {
margin-right: 5%;
margin-left: 5%;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
This sets the browsers so they are understanding the "global" settings, you can set you font in here to save having to put it into each and every div.. only over-riding it where necessary.
I've since amended simplified some of the CSS:
So just to double check:
#divone {
margin:0px;
background-color: #FFF;
/* vertical-align: middle; not required it doesn't do what you want... but there is a way ;) */
padding: 5px 3px 5px 0;
color: #000;
border: 1px solid #000;
}#divtwo {
margin: 0px;
padding: 3px 0;
background-color: #77c361;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
font-size: 70%;
}
for the two main bits..
<div three> is a little more complicated those floating lists...
but let's see if we can the first two bits working first... remember that the divs do not know there is anything in them if it's all in floats.
so rest of the HTML for that bit:
</style>
</head>
<body>
<body>
<div id="divone">
<h1><img class="logo" border="0" src="img/logo.jpg">Some Title</h1>
</div><div id="divtwo">
<a href="#"><img class="logo" border="0" src="#"></a>
<ul>
<li>» <a href="#">1</a></li>
<li>» <a href="#">2</a></li>
</ul>
</div>
</body></html>
Your turn!
Suzy
Suzy, that works in IE, opera and moz for me. So thats a result. Do you have any suggestions of how I can get this sorted for future reference so I dont have to ask again. As in where am I going wrong in general (appart from trying CSS :0) and where would you suggest I read to sort this out.
Cheers
Basically KISS (Keep it simple silly!) use a CSS table hybrid if you need to until you get the positioning (floats etc..) worked out.
Those first two divs are really a very easy replacement for a table style layout as you have just cut out two large cells. But inside <divthree> where you have the two lists floating side by side, this can be done but there will "problems" (not fatal ones;)) if there is no other content in that div. Basically it will not stretch to provide a nice border around the lists unless you use a bit of CSS trickery (e.g. <div style="clear:both;"></div> ) to fool <div three into thinking it has content.
OTOH I would see nothing wrong in putting a table inside <divthree> to contain the lists instead.. less headache for you and no need for CSS trickery. And to all intents and purposes putting those lists into a table is not going to affect your HTML Flow, or CSS-P (positioning).
What I'm saying is that <divthree> is a division on your page and you're likely only to want to style it or move/position it in its entirety... regardless of what is inside it so using <div> is correct for the <division>.
Another reason I'm saying this is that Lists can be difficult to get to grips with (Their paddings and margins cross browser leads to unpredicatable results, especially when floating them!).
The lists could be given their own id's and positioned with them (but that's a whole new story;)). You have them wrapped in divs of their own which is probably the easiest way to deal with them for a start, but in reality they are not divisions they are lists so if you're going to put them in divs they why not make life easier and put them in a table cell. Which solves both problems in one go and lets you get on with the rest of the page;)
You can still style the table/lists with CSS :)
The very basic thing to learn is the different implementation of the Box Model. (the problems you had with layout were different padding and margins affecting the 100% width you had on divs 1,2 and 3. IE's [incorrect] box model lets you do this, all others don't, they add the margins and padding (and borders) onto the width so it was actually larger than the 100% you specified.)
here is a thread a wrote a while back about CSS positioning [webmasterworld.com] ~ msg#5 ~ which may help get the basics of how to "stack" divs.
Note:
correction to the above thread: The default position is not position:relative; it is position:static; which is "equivalent" to position: relative; top: 0; left: 0; but the difference is you cannot specify co-ordinates on position: static;
Keep going with the divs as replacement for table cells for layout, you can always go back and replace any inline tables later, as you learn more, if you want to.
Suzy
[disclaimer] Just cos I mentioned tables in the same post as CSS doesn't mean I've fallen ;) There is always middle ground![/disclaimer]
but in reality they are not divisions they are lists
That is starting to make sense.
I may well move down the table route as it is either two colums or if no sub categories are present it displays a note in a paragraph without the two floated lists or their respective divs.
As a simple last question to which you can answer yes or no(you have spent long enough doing my homework :)):
Can what I want to do be done with just divs?
It has become a challenge you see. Nearly there and all that :).
Cheers
Suzy
try that CSS trickery I mentioned in last post after floated divs to fool the parent div into thinking it has some content (if it doesn't have any other content after the floats that is;) )
I will have to come back to this one. There aint not trickery going on where I am :)
Cheers
