|
|
 |
|
|
Thread Tools | Display Modes |
Jun 8th, 2007, 2:05 PM
|
#1 |
|
Hobbyist Programmer
Join Date: Oct 2006
Posts: 146
Rep Power: 2
 |
padding and DIV's screwy in FF - go to second post
now i have fixed at least 4 or 5 issues with this using different positioning methods, margins/padding vs each other, etc.
still three of my nested div's are screwy in FF. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>University of Wisconsin-La Crosse:College of Science and Allied Health</title>
<style type="text/css">
.wholepage {
width:734px;
height:511px;
margin:0 auto;
text-align:center;
padding:0px;
}
.newStyle1 {
background-image:url("1.png");
width: 734px;
height: 78px;
border:none;
padding:0px;
}
.imgLink {
border:none;
float:left;
padding-left:10px;
padding-top:5px;
}
.headStyle {
font-family:Georgia;
color:white;
font-style:normal;
font-size:11px;
font-weight:normal;
float:left;
padding-left:10px;
padding-top:6px;
}
.linkStyle {
color:white;
font-style:normal;
text-decoration:none;
padding:0px;
}
.style1 {
border:none;
width: 132px;
height: 433px;
background-image: url('nav1.png');
color: white;
text-align: left;
font-size:14px;
line-height:12px;
float:left;
padding-top:0px;
padding:0px;
}
.content {
height:433px;
width:580px;
text-align:left;
padding:none;
}
.paragraph1 {
height:100px;
width:385px;
font-size:14px;
text-align:left;
padding-top:25px;
float:left;
}
.contentpicture {
height:105px;
width:155px;
padding-left:20px;
padding-top:-10px;
padding-bottom:0px;
float:left;
}
.footer {
width:602px;
height:30px;
padding-bottom:-10px;
padding-left=-50px;
}
.subcontent {
height:245px;
width:560px;
font-size:14px;
text-align:left;
padding-top:20px;
}
.title {
height:25px;
width:570px;
font-family:Georgia;
color:white;
font-style:normal;
font-size:20px;
font-weight:bold;
border:none;
text-align:left;
padding-top:18px;
padding-left:145px;
float:left;
}
.search {
float:left;
width:130px;
}
.ctitle {
height:20px;
width:300px;
font-size:18px;
float:left;
text-align:left;
padding-top:-10px;
padding-left:10px;
}
</style>
</head>
<body>
<div class="wholepage">
<div class="newStyle1"><div class="imgLink" style="width: 119px"><a href="index.html"><img src="home.jpg" alt="University of Wisconsin-La Crosse" border="0" /></a></div><div class="headStyle"><a href="academic.html" class="linkStyle">academic advising</a> <a href="apply.html" class="linkStyle">apply now</a> <a href="alumni.html" class="linkStyle">for alumni</a> <a href="support.html" class="linkStyle">support our college</a> <a href="contact.html" class="linkStyle">contact us</a></div>
<div class="search">search |________|</div><div class="title">College of Science and Allied Health</div></div>
<div class="style1"><br />
<a href="mission.html" class="linkStyle">mission & vision</a><br />
<br />
<a href="programs.html" class="linkStyle">programs & centers</a><br />
<br />
<a href="departments.html" class="linkStyle">departments</a><br />
<br />
<a href="faculty.html" class="linkStyle">faculty and staff</a><br />
<br />
<a href="deanoffice.html" class="linkStyle">office of the dean</a></div>
<div class="content">
<div class="ctitle"><strong><br />
Welcome to our College<br />
</strong><br />
</div>
<div class="paragraph1">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Proin aliquet tristique tortor. Morbi egestas risus nec mi.
Praesent orci purus, aliquam sed, semper in, luctus et, velit. Quisque
turpis libero, tempor non, dignissim a, malesuada sit amet, nulla.
Phasellus non lorem. Praesent scelerisque nisi eu turpis. Duis rhoncus.
Mauris iaculis blandit mi. Cras sagittis elit blandit arcu. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</div>
<br />
<div class="contentpicture"><img src="sahpic.png" alt="College of Science and Health" /></div>
<div class="subcontent">
Nam venenatis. Duis eget dolor. Integer metus risus, ultrices adipiscing, adipiscing sed, semper vel, nisl.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aenean in libero. Vestibulum in est et eros sagittis vulputate. Quisque sodales condimentum eros.
Nunc risus. In et augue vel nisl tempor commodo. Fusce in orci ut purus laoreet nonummy. Vivamus id orci.
Vestibulum eros. Nam sit amet felis eu mi tempus interdum. Donec porta sodales urna.
Nullam tempus, nulla et cursus lobortis, enim pede ullamcorper nulla, at viverra purus nisi at nisl.
Sed sapien. Maecenas vestibulum tristique est. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam vulputate, leo quis tincidunt malesuada, ligula lorem imperdiet neque,
ac dignissim metus mauris quis est. Nam nec ipsum sit amet turpis adipiscing fringilla. Curabitur pulvinar
adipiscing est. Aliquam erat volutpat. Etiam est. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Ut nisl leo, bibendum luctus, tempor ut, adipiscing at, est. Aenean accumsan
sollicitudin tortor. Maecenas rutrum mauris in dolor. Nulla tellus. Etiam rutrum nisi eget dolor.
Cras consectetuer dolo</div></div>
<div class="footer"><img src="footer.png" alt="footer" /></div>
</div>
</body>
</html>ive spent 8 hours on this i am mad... Last edited by physicist; Jun 8th, 2007 at 2:17 PM. |
|
|
|
Jun 8th, 2007, 2:16 PM
|
#2 |
|
Hobbyist Programmer
Join Date: Oct 2006
Posts: 146
Rep Power: 2
|
FOUND IT! changed one of my container div styles to float left. now i still have a problem with the footer div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>University of Wisconsin-La Crosse:College of Science and Allied Health</title>
<style type="text/css">
.wholepage {
width:734px;
height:511px;
margin:0 auto;
text-align:center;
padding:0px;
}
.newStyle1 {
background-image:url("1.png");
width: 734px;
height: 78px;
border:none;
padding:0px;
}
.imgLink {
border:none;
float:left;
padding-left:10px;
padding-top:5px;
}
.headStyle {
font-family:Georgia;
color:white;
font-style:normal;
font-size:11px;
font-weight:normal;
float:left;
padding-left:10px;
padding-top:6px;
}
.linkStyle {
color:white;
font-style:normal;
text-decoration:none;
padding:0px;
}
.style1 {
border:none;
width: 132px;
height: 433px;
background-image: url('nav1.png');
color: white;
text-align: left;
font-size:14px;
line-height:12px;
float:left;
padding-top:0px;
padding:0px;
}
.content {
height:433px;
width:580px;
text-align:left;
padding:none;
margin:none;
float:left;
}
.paragraph1 {
height:100px;
width:385px;
font-size:14px;
text-align:left;
padding-top:25px;
float:left;
}
.contentpicture {
height:105px;
width:155px;
padding-left:20px;
padding-top:-10px;
padding-bottom:0px;
float:right;
}
.footer {
width:602px;
height:30px;
padding-bottom:-10px;
padding-left=-50px;
}
.subcontent {
height:245px;
width:560px;
font-size:14px;
text-align:left;
padding-top:20px;
vertical-align:top;
float:right;
}
.title {
height:25px;
width:570px;
font-family:Georgia;
color:white;
font-style:normal;
font-size:20px;
font-weight:bold;
border:none;
text-align:left;
padding-top:18px;
padding-left:145px;
float:left;
}
.search {
float:left;
width:130px;
}
.ctitle {
height:20px;
width:300px;
font-size:18px;
float:left;
text-align:left;
padding-top:-10px;
padding-left:10px;
}
</style>
</head>
<body>
<div class="wholepage">
<div class="newStyle1"><div class="imgLink" style="width: 119px"><a href="index.html"><img src="home.jpg" alt="University of Wisconsin-La Crosse" border="0" /></a></div><div class="headStyle"><a href="academic.html" class="linkStyle">academic advising</a> <a href="apply.html" class="linkStyle">apply now</a> <a href="alumni.html" class="linkStyle">for alumni</a> <a href="support.html" class="linkStyle">support our college</a> <a href="contact.html" class="linkStyle">contact us</a></div>
<div class="search">search |________|</div><div class="title">College of Science and Allied Health</div></div>
<div class="style1"><br />
<a href="mission.html" class="linkStyle">mission & vision</a><br />
<br />
<a href="programs.html" class="linkStyle">programs & centers</a><br />
<br />
<a href="departments.html" class="linkStyle">departments</a><br />
<br />
<a href="faculty.html" class="linkStyle">faculty and staff</a><br />
<br />
<a href="deanoffice.html" class="linkStyle">office of the dean</a></div>
<div class="content">
<div class="ctitle"><strong><br />
Welcome to our College<br />
</strong><br />
</div>
<div class="paragraph1">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Proin aliquet tristique tortor. Morbi egestas risus nec mi.
Praesent orci purus, aliquam sed, semper in, luctus et, velit. Quisque
turpis libero, tempor non, dignissim a, malesuada sit amet, nulla.
Phasellus non lorem. Praesent scelerisque nisi eu turpis. Duis rhoncus.
Mauris iaculis blandit mi. Cras sagittis elit blandit arcu. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</div>
<br />
<div class="contentpicture"><img src="sahpic.png" alt="College of Science and Health" /></div>
<div class="subcontent">
Nam venenatis. Duis eget dolor. Integer metus risus, ultrices adipiscing, adipiscing sed, semper vel, nisl.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aenean in libero. Vestibulum in est et eros sagittis vulputate. Quisque sodales condimentum eros.
Nunc risus. In et augue vel nisl tempor commodo. Fusce in orci ut purus laoreet nonummy. Vivamus id orci.
Vestibulum eros. Nam sit amet felis eu mi tempus interdum. Donec porta sodales urna.
Nullam tempus, nulla et cursus lobortis, enim pede ullamcorper nulla, at viverra purus nisi at nisl.
Sed sapien. Maecenas vestibulum tristique est. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam vulputate, leo quis tincidunt malesuada, ligula lorem imperdiet neque,
ac dignissim metus mauris quis est. Nam nec ipsum sit amet turpis adipiscing fringilla. Curabitur pulvinar
adipiscing est. Aliquam erat volutpat. Etiam est. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Ut nisl leo, bibendum luctus, tempor ut, adipiscing at, est. Aenean accumsan
sollicitudin tortor. Maecenas rutrum mauris in dolor. Nulla tellus. Etiam rutrum nisi eget dolor.
Cras consectetuer dolo</div></div>
<div class="footer"><img src="footer.png" alt="footer" /></div>
</div>
</body>
</html> |
|
|
|
|
Jun 8th, 2007, 4:38 PM
|
#3 |
|
Newbie
Join Date: Jun 2007
Posts: 15
Rep Power: 0
|
Padding and div "problems" in FF tend to be because of the differences in how FF and IE render the box model (i.e. how divs work inside divs). IIRC FF renders it properly but IE (or atleast up to IE 6) don't render it correctly. This unfortunatly means that [if it's a box model problem] how it looks in FF is exactly what it should look like, while IE is making the error.
I can't remember these things off the cuff, but usually it just means fiddling with positions and padding until it looks ok in both, or using a work-around. Try doing a search for pages about the Box Model, there are a few helpful ones out there. You could also try instead of nesting the divs, using positioning to get them into place, it can take a very long time to get it right that way, however. |
|
|
|
|
Jun 8th, 2007, 5:02 PM
|
#4 | |
|
Hobbyist Programmer
Join Date: Oct 2006
Posts: 146
Rep Power: 2
|
Quote:
|
|
|
|
|
|
Jun 8th, 2007, 5:29 PM
|
#5 |
|
Hobbyist Programmer
Join Date: Oct 2006
Posts: 146
Rep Power: 2
|
right now the footer STILL wont work....
|
|
|
|
|
Jun 8th, 2007, 11:58 PM
|
#6 |
|
Hobbyist Programmer
Join Date: Oct 2006
Posts: 146
Rep Power: 2
|
well i got rid of float:left in 6 div's, worked for 5 of the div's LOL
now just the footer. damn thing wont align left in IE. |
|
|
|
|
Jun 9th, 2007, 10:22 AM
|
#7 |
|
Newbie
Join Date: Jun 2007
Posts: 15
Rep Power: 0
|
How are you trying to align it? Only using padding?
try using positioning instead, for example: #footer {position:absolute; top:85%; left:10px; width:80%; margin-bottom:30px;}That's just an example, but something like that is how I'd usually get a footer working properly. It depends on how restrictive your markup is though, if you use lots of absolutes you can give it a fixed position, but if you make it scale with the browser window, then you'll have to fiddle about with percentages until it's right. |
|
|
|
|
Jun 10th, 2007, 12:00 PM
|
#8 | |
|
Hobbyist Programmer
Join Date: Oct 2006
Posts: 146
Rep Power: 2
|
Quote:
 |
|
|
|
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
