PDA

View Full Version : Firefox not centering box but IE is fine



ridesign
Mar 3rd, 2008, 12:37 AM
Hi,
For my site: http://www.ttkn.com/site/ it appears fine in ie6, but in firefox the center box is appearing over the right hand column and is not centering.
Also the header under the search box is slightly squashed.

I tried to clean up the html as in w3c , and have goto http://www.ttkn.com/site/index5.htm

Can anyone help me out please.

Thanks

abduraooft
Mar 3rd, 2008, 08:11 AM
Remove all rules in red.

#content {
float:left;
left:10px;
line-height:130%;
margin:0pt;
position:relative;
width:520px;
}
Where would you like to place your search?

#search {
float:right;
position:relative;
right:35px;
top:35px;
}

Don't apply float, if you are not sure about the purpose. Again, don't apply top/bottom and left/right rules to an element which is positioned as relative or not given any position.

ridesign
Mar 3rd, 2008, 09:33 AM
Hi,
Thanks for your comments.
I made the changes you said the also deleted a float:left; in pagecontent div, this has centered the box but the text above the box is going onto the 2nd line also the button under the box are not centered under the box.

here is the updated page: http://www.ttkn.com/site/index6.htm

Is it possible the have the searchbox a few pixel down from its current position?
Also I noticed that the right column boxes are going over the page.

thanks

abduraooft
Mar 3rd, 2008, 09:53 AM
Add padding-top:5px; to #search, and I don't think that table is required there. Try to remove it.

Your #sideNavRight has only 180px width, so remove all floats from the inner elements and allow them to work in normal flow.

ridesign
Mar 4th, 2008, 12:12 AM
Hi abduraooft,
-Adding the padding to the search makes it perfect, when I remove the table it moves the search button away from the search field.

-When I removed the floats from 3 places in the css for the #sideNavRight it messes the layout by putting the right column under the left hand column.

-Also the center content is too close to the left hand side, do I need to add padding somewhere to move the center content?, is there a way to center the box?
-Also I need to center the buttons below it.

-Also the text in the center of the page is appearing in 2 lines

Thanks

ridesign
Mar 4th, 2008, 01:37 PM
any suggestions?

abduraooft
Mar 4th, 2008, 01:49 PM
I suggested to remove the floats from the child elements of #sideNavRight, not from this element. You should keep a float:right for this. So update your code and post a link
Have a look at http://www.codingforums.com/showthread.php?p=182254#post182254

ridesign
Mar 4th, 2008, 10:33 PM
by child elements of #sideNavRight, do you mean:
#sideNavRight p {
#sideNavRight fieldset {

Also I noticed I can't click on any links to the left of the center box.
Should I add: z-index : 2;

thanks

abduraooft
Mar 5th, 2008, 07:42 AM
I've already told you, don't use float or absolute positions if you are not certain about the effects and consequences.
Why do you give float:left here?

#barThree {new2.css (line 115)
clear:both;
float:left;
margin:0pt;
padding:0pt 10px 10px;
position:relative;
width:930px;
}
Remove it and give margin:0 auto; to

#content {new2.css (line 135)
line-height:100%;
margin:0pt auto;
position:relative;
width:515px;
}
After these changes update your link.

ridesign
Mar 5th, 2008, 09:01 AM
Hi,
I have made the above changes at: http://www.ttkn.com/site/index6.htm

thanks

abduraooft
Mar 5th, 2008, 12:03 PM
Now what are your problems?

I believe, in this layout, basically you need at most 3 floats
1)float:left; for left column
2)float:right; for right column
3)float:left; for all li's in ul#homeNav

Now if you remove all floats and widths from the inner elements of your right side bar (having float:right;), you'll get a better result.