really flaky div/css column layout in xhtml (only in firefox) [Archive]

Click to See Complete Forum and Search --> : really flaky div/css column layout in xhtml (only in firefox)

fluid

08-21-2006, 02:44 AM

i am working on a joomla! web site...its a template that i purchased from 4templates.com...i was in a hurry. lol.

anyway, im having a weird display issue with the front page of this site, and i absolutely cannot figure it out. the best i can guess, it is a bug with firefox.

of course, when i was done with firefox, crappy IE had issues displaying it similiar to this. lol. they turned out to be caused by a 1 pixel difference in column width. i fixed that problem, and now im getting something really flaky on another column.

http://www.carolina-pc.com

check that out in IE, then in firefox... it will likely work fine in both. then refresh the page in firefox. eventually, after 2-4 tries, you will notice the right-most column drops to the very bottom of the page.

i have gone so far as to get it working and save the html, then refresh until it broke and saved that html...the html code is identical

as for the CSS, they are also identical, as the css is kept in a static file. i dont get it...at last check, i had 0 xhtml errors with w3c (granted, that doesnt mean its laid out correctly, just that i maintained proper syntax when coding)...

should i write this up as a bug in firefox? IE does not seem to do it. i can refresh in it all day long and never get this problem. oh, heres another thing. if you hold the left shift key while refreshing, it never happens.

i have turned on a lime border for the div on the left, and purple for the div on the right. its the right div that is flaking out and trying to escape the page. lol...i dont know what to do, ive wasted 2 days trying to fix this goofy thing.

the only issues im getting from w3c on the css is warnings about background colors for form elements that have color properties assigned without background colors.

i get no warnings or errors with the html at all.

here is the css and resulting html code:

/** BASIC */

html, body {
height: 100%;
}

.title {
margin-bottom: 15px;
border-bottom: 1px solid #D3D9DB;
}

.title h2 {
height: 31px;
}

.title h3 {
height: 21px;
}

.title strong {
display: block;
margin-left: 15px;
}

#title1 { background: url(/images/homepage23.gif) no-repeat left center; }
#title1a { background: url(/images/homepage23.gif) no-repeat left center; }
#title2 { background: url(/images/homepage24.gif) no-repeat left top; }
#title3 { background: url(/images/homepage27.gif) no-repeat left top; }
#title4 { background: url(/images/subpage1_01.gif) no-repeat left top; }
#title5 { background: url(/images/subpage2_01.gif) no-repeat left top; }

/** TOP */

#top {
width: 747px;
height: 177px;
margin: 0px auto;
}

#extra1 {
float: left;
width: 12px;
height: 50px;
background: url(/images/homepage02.gif) no-repeat left top;
}

#extra2 {
float: left;
width: 723px;
height: 177px;
}

#extra3 {
float: left;
width: 12px;
height: 177px;
background: url(/images/homepage03.gif) no-repeat left top;
}

/** HEADER */

#header {
float: left;
width: 723px;
height: 123px;
}

#logo {
float: left;
padding: 53px 0px 0px 0px;
}

#top-menu {
float: right;
padding: 70px 0px 0px 0px;
}

#top-menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#top-menu li {
display: inline;
}

#top-menu a {
display: block;
float: left;
height: 20px;
}

#top-menu b {
display: none;
}

#top-menu1 {
width: 72px;
background: url(/images/homepage06.gif) no-repeat left top;
}

#top-menu2 {
width: 77px;
background: url(/images/homepage07.gif) no-repeat left top;
}

#top-menu3 {
width: 69px;
background: url(/images/homepage08.gif) no-repeat left top;
}

/** MENU */

#menu {
float: left;
width: 723px;
height: 54px;
}

#menu div {
width: 723px;
height: 54px;
background: url(/images/homepage09.gif) no-repeat left top;
}

#menu ul {
width: 514px;
height: 33px;
margin: 0px;
padding: 21px 0px 0px 209px;
list-style: none;
background: url(/images/homepage11.gif) no-repeat right top;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 80px;
padding: 0px 0px 0px 17px;
background: url(/images/homepage12.gif) no-repeat left center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}

/** CONTENT */

#content {
width: 747px;
margin: 0px auto;
}

#left {
float: left;
width: 209px;
}

#right {
float: left;
width: 538px;
}

/** FOOTER */

#footer {
clear: both;
width: 647px;
height: 40px;
padding: 15px 50px;
margin: 0px auto;
}

#footer .links {
float: left;
}

#footer .legal {
float: right;
}

/** BOX1 */

#box1 {
padding: 10px 2px 0px 24px;
}

/** BOX2 */

#box2 {
padding: 0px 0px 0px 23px;
}

/** BOX3 */

#box3 {
padding: 20px 25px 0px 50px;
}

/** BOX4 */

#box4 {
margin: 0px 22px 0px 0px;
padding: 7px 0px 1px 0px;
border-bottom: 1px solid #D3D9DB;
}

/** BOX5 */

#box5 {
float: left;
width: 239px;
padding: 3px 17px 0px 15px;
border-right: 1px solid #D3D9DB;
border: 1px solid #00FF00;
}

#box5 .title {
}

#box5 .content {
padding: 0px 10px 15px 0px;
}

/** BOX6 */

#box6 {
float: right;
width: 230px;
padding: 3px 0px 0px 15px;
border: 1px solid #FF00FF;
}

/** BOX7 */

#box7 {
float: left;
width: 485px;
padding: 3px 0px 0px 15px;
}

#box7 .title {
}

#box7 .content {
padding: 0px 10px 0px 15px;
}

/** BASIC */

body {
margin: 0px;
padding: 0px;
background: #FFFFFF url(/images/homepage01.gif) repeat-x left top;
}

/** FORMS */

form {
margin: 0px;
padding: 0px;
}

/** HEADINGS */

h1, h2, h3, h4, h5, h6 {
margin: 0px;
}

/** TEXTS */

body, th, td, input, textarea, select {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5F727A;
}

p, blockquote, ul, ol, dl {
margin-top: 0px;
margin-bottom: 1em;
text-align: justify;
}

.text1 {
margin-bottom: 5px;
font-size: 11px;
font-weight: bold;
color: #E9881A;
}

.text1 span {
padding: 0px 7px;
background: url(/images/homepage18.gif) no-repeat center center;
}

/** LISTS */

#mainlevel_list1 {
margin: 0px;
padding: 0px;
list-style: none;
}

#mainlevel_list1 li {
border-bottom: 1px solid #D3D9DB;
}

a.mainlevel_list1 {
display: block;
width: 156px;
height: 18px;
padding: 7px 0px 0px 26px;
background: url(/images/homepage15.gif) no-repeat 10px 9px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #5F727A;
}

a:hover.mainlevel_list1 {
background: #6D8087 url(/images/homepage16.gif) no-repeat 10px 9px;
color: #FFFFFF;
}

.list2 {
margin-left: 0px;
padding-left: 0px;
list-style: inside;
}

#mainlevel_alerts {
margin-left: 0px;
padding-left: 0px;
list-style: inside;
}

/** LINKS */

a {
color: #E9881A;
}

a:hover {
text-decoration: none;
}

.link1 {
display: block;
height: 14px;
background: url(/images/homepage26.gif) no-repeat right top;
}

.link1 b {
display: none;
}

.link2 {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}

.link2:hover {
text-decoration: underline;
}

/** STYLES */

.style1 {
color: #919FA4;
}

.style1 a {
color: #919FA4;
}

.style1 a:hover {
}

/** BACKGROUNDS */

.bg1 { background: url(/images/homepage04.gif) repeat-x left top; }
.bg2 { background: url(/images/homepage10.gif) repeat-x left top; }
.bg3 { background: url(/images/homepage13.gif) repeat-y left top; }
.bg4 { background: url(/images/homepage14.gif) no-repeat left top; }
.bg5 { background: url(/images/homepage25.gif) repeat-x left top; }

/** MISC */

.align-justify { text-align: justify; }
.align-right { text-align: right; }

img { border: none; }

.img1 {
float: left;
margin: 3px 15px 0px 0px;
}

.img2 {
float: right;
margin: 3px 0px 0px 15px;
}

hr { display: none; }

.hr1 {
height: 1px;
}
.back_button {
width: 485px;
text-align: right;
margin: 10px 0px 0px 35px;
}

the html code is generated, and is not very neat as a result. all thats messed up is the whitespace. if you need to view it, please view the source and apply formatting to it.

anyone ever see anything like this happen? i hate to think firefox has a problem with this page. hehe...its really a pretty simple page.

Kravvitz

08-21-2006, 02:57 AM

fluid

08-21-2006, 03:16 AM

Sounds like a rounding problem to me. Try decreasing the total width of #box6 by just 1px.

Why are you using XHTML 1.0 Transitional? What exactly are you transitioning from?

All new documents should be written in HTML 4.01 Strict or XHTML 1.0 Strict.

Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html)
Ten ways to speed up the download time of your web pages (http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)

it is transitional because that was the most recent back when i bought this template.

and i have already adjusted the size of box6...in fact, i just did it again to seperate it from box5 a bit with a margin to see if it would help. lol. ill try editing the size of box5 down by 1...

the reason i am using transitional is because i am using things like image border attributes, and target attributes on anchor tags. those are bad in 1.0 strict.

i have not looked at what replaces them yet...those two little things would help me get away from transitional.

heck, its not even really me that did it. the template (as i stated in my long post) is a purchased template. it came transitional, and when i tried to migrate it to strict there were too many errors to worry about at that time. the site, as i said, is dynamically generated with Joomla!. I need to get the site done, then worry about cleaning up the template and migrating to strict.

do you think that could solve this problem? i have tried changing the size of the left and right columns, i have not changed the size of the column with the menu in it, but i dont think that will matter very much.

Kravvitz

08-21-2006, 03:21 AM

it is transitional because that was the most recent back when i bought this template.
That doesn't make sense. All 3 variants of XHTML 1.0 became a W3C Recommendation at the same time back in 2000 (http://www.w3.org/TR/xhtml1/).

the reason i am using transitional is because i am using things like image border attributes, and target attributes on anchor tags. those are bad in 1.0 strict.
Use CSS for the first and JavaScript for the second.

The Perfect Pop-up (http://www.accessify.com/features/tutorials/the-perfect-popup/)
Accessible Pop-up Links (http://www.alistapart.com/articles/popuplinks/)
Beware of opening links in a new window (http://www.webcredible.co.uk/user-friendly-resources/web-usability/new-browser-windows.shtml)
New-Window Links in a Standards-Compliant World (http://www.sitepoint.com/article/standards-compliant-world/)
Opening new windows with JavaScript, version 1.1 (http://www.456bereastreet.com/archive/200605/opening_new_windows_with_javascript_version_11/)

do you think that could solve this problem? i have tried changing the size of the left and right columns, i have not changed the size of the column with the menu in it, but i dont think that will matter very much.
Yes, I think making the total width of those floated columns 1 or 2 pixels less will fix it.

fluid

08-21-2006, 03:31 AM

That doesn't make sense. All 3 variants of XHTML 1.0 came out at the same time back in 2000.

Use CSS for the first and JavaScript for the second.

The Perfect Pop-up (http://www.accessify.com/features/tutorials/the-perfect-popup/)
Accessible Pop-up Links (http://www.alistapart.com/articles/popuplinks/)
Beware of opening links in a new window (http://www.webcredible.co.uk/user-friendly-resources/web-usability/new-browser-windows.shtml)
New-Window Links in a Standards-Compliant World (http://www.sitepoint.com/article/standards-compliant-world/)
Opening new windows with JavaScript, version 1.1 (http://www.456bereastreet.com/archive/200605/opening_new_windows_with_javascript_version_11/)

Yes, I think making the total width of those floated columns 1 or 2 pixels less will fix it.

anyone reading this anytime within the next hour will not be seeing the site as it was intended. i am taking the advice of kravvitz, and am indeed migrating the transitional code over to strict code.

kravvitz, one issue i have with the 1 or 2 pixels less solution, is that ive done it...and by more than 1 or 2 pixels. ive done that over and over again. :(

i will get it migrated over, and keep beating on different elements of the page to see what happens. i had a similiar issue with this layout a few days ago that i solved.

the little picture on the left with the gray man in it, that was causing the large image with the lady to bounce down just like this is doing...only it was consistent. i shrunk it down incrementally until everything worked, and once i was within a few pixels i bumped it up by 1 until it stopped working...then went down by 1 more.

this problem is different than that though, because its not doing it consistently.

anyway, ill get this updated to strict xhtml, and then move back into beating on this weird box issue. keep trying to find a solution if you dont mind...making this migration will take my brain off of this perplexing issue at least. lol...

fluid

08-22-2006, 02:22 PM

well i didnt do anything spectacular with the code to get rid of this problem. i moved the following two DIVs out of static HTML that was coming from a mysql table straight into the template and made those two columns a little more flexible for what goes into them...and the problem i was having just stopped.

i still cant figure out what the problem was, or what fixed it. lol. it was the DIV's for box5 and box6...and they are in the same place in the final rendered code. oh well. guess ill never know. because it wasnt consistent on the server, was consistent as local html, and never happened with the cache forced to disabled...i wonder i it could have had something to do with the amount of time it took to pull that second div out of the database. still could have been a flaky firefox bug like that.

drhowarddrfine

08-22-2006, 06:24 PM

still could have been a flaky firefox bug like that.Not a bug so much as an idiosynch of FF. Try specifying the size of your images and see if it fixes it. Firefox tries to display the images properly among the text but if it doesn't know the size right away it will guess. Refreshing fixes the problem because by then it knows the size.