Programming Forums

Programming Forums (http://www.programmingforums.org/forumindex.php)
-   HTML / XHTML / CSS (http://www.programmingforums.org/forum27.html)
-   -   padding and DIV's screwy in FF - go to second post (http://www.programmingforums.org/showthread.php?t=13309)

physicist Jun 8th, 2007 3:05 PM
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> &nbsp;&nbsp;  <a href="apply.html" class="linkStyle">apply now</a>  &nbsp;&nbsp;  <a href="alumni.html" class="linkStyle">for alumni</a> &nbsp;&nbsp;  <a href="support.html" class="linkStyle">support our college</a>  &nbsp;&nbsp;  <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 />
        &nbsp;&nbsp;&nbsp;<a href="mission.html" class="linkStyle">mission &amp; vision</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<a href="programs.html" class="linkStyle">programs &amp; centers</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<a href="departments.html" class="linkStyle">departments</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<a href="faculty.html" class="linkStyle">faculty and staff</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<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...

physicist Jun 8th, 2007 3:16 PM
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> &nbsp;&nbsp;  <a href="apply.html" class="linkStyle">apply now</a>  &nbsp;&nbsp;  <a href="alumni.html" class="linkStyle">for alumni</a> &nbsp;&nbsp;  <a href="support.html" class="linkStyle">support our college</a>  &nbsp;&nbsp;  <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 />
        &nbsp;&nbsp;&nbsp;<a href="mission.html" class="linkStyle">mission &amp; vision</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<a href="programs.html" class="linkStyle">programs &amp; centers</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<a href="departments.html" class="linkStyle">departments</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<a href="faculty.html" class="linkStyle">faculty and staff</a><br />
        <br />
        &nbsp;&nbsp;&nbsp;<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>

Tsar_of_Cows Jun 8th, 2007 5:38 PM
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.

physicist Jun 8th, 2007 6:02 PM
Quote:
Originally Posted by Tsar_of_Cows (Post 128908)
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.
thanks, its getting pretty hard but i just mess with padding like you said, and somehow its getting better and better :banana: :banana:

physicist Jun 8th, 2007 6:29 PM
right now the footer STILL wont work....

physicist Jun 9th, 2007 12:58 AM
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.

Tsar_of_Cows Jun 9th, 2007 11:22 AM
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.

physicist Jun 10th, 2007 1:00 PM
Quote:
Originally Posted by Tsar_of_Cows (Post 128952)
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.
well the implementation will include the footer moving as more content is added. i have to make a DWT so that noobs can just type new content, and as it lengthens, the footer goes with it. So absolute positioning wont be possible. but still thanks, ill look into trying margins again, hope it doesnt bite me in the ass again :)


All times are GMT -5. The time now is 2:43 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC