|
CSS - Center Aligning Page Not Working In Ff/opera
I've made a site for someone and it was center aligning and it worked in all 3 main browsers (IE, FF and Opera) so when I was tinkering with ideas for redoing the look of my site, I used the CSS sheet I used for his site as a base for mine.
Unfortunately it's only center align in IE7 with my site. My site is admittedly a bit more complex, at the moment, with more divs, it should still work. Mind you I'm probably just too tired to spot the obvious. Can anyone see what's stopping it from center aligning in FF and Opera? The template: http://www.toadwarrior.com/temp/index.php The CSS: http://www.toadwarrior.com/temp/mark_h_walker_journalist.css Thank you in advance. Similar Tutorialshey im having a problem with my div aligning in my css. I want the whole site to be centered but start on the top of the page. I can either set all my margins and padding to 0 and get it top left or I can center it in the middle of the screen but theres a giant gap from the top of the screen and where the site actually starts.. any suggestions on how to align it with the top but still keep it centered? Thanks is there any way of center aligning a div layer on a page by not nesting it within another layer. heres the codes i tried but it didnt work: <div align="center" id="Layer1" style="position:relative; width:268px; height:75px; z-index:1; text-align:center"></div> I haven't figured out how to align the <div> tag to be center for the Mozilla browser.. I know I'm missing something here but I can't remember which. This one work in IE but not Mozilla. Code:
<div style="text-align: center;">
<div>
<STYLE TYPE="text/css">
body {font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;}
H2 {font-family:Verdana;
font-size:12pt;
font-weight:bold;
color:black;
width: 625px;
BORDER-BOTTOM: black 1px solid;
}
TD {font-family:Verdana;
font-size:8pt;
font-weight:normal;
color:black;}
.cTradeLines TD
{FONT-WEIGHT: normal;
FONT-SIZE:10ptl;
COLOR: black;
FONT-FAMILY: Arial}
.cTradeLines A
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cTradeLines A:hover
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cSpSm
{FONT-WEIGHT: normal;
FONT-SIZE: 7pt;
COLOR: black;
FONT-FAMILY: Arial}
</STYLE>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"><LABEL style="font-family:Verdana; font-size:12pt; font-weight:bold; color:black;">TRANS UNION Credit Profile Report</LABEL><br>TRANS UNION<br>555 W ADAMS<br>CHICAGO, IL. 60661<br>800 888-4213<br>
Date Reported: 9/16/2005</td>
</tr>
</table>
</p>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"></td>
</tr>
</table>
</p>
<p>
<H2>Status</H2>
No Hit<br></p>
</div>
</div>
I know the codes isn't w3.org compliant with the way the <style> tag are inserted. It's the way the web page is created via the 3rd party website when receiving it and I'm encapsulating it with a <div> tag. I don't wanna do a lot of screen scraping and moving around the tags with PHP because they are never the same from the 3rd party website. Thanks.. If I have a bunch of <div>'s floated here and there to form the layout of my page, if I want to have my design centered on the screen do I have to wrap the whole thing in a another pair of div's, ie <div align="center">...</div> ? Hi For some reason my links won't align centrally on a mac or netscape. Here's the classes in a style sheet I'm linking to. It works on a PC though. I want the links to only become underlined when you roll over. The problem is the links are long sentences and in a thin table so they go over on to two lines. And when this happens, the second line is not aligned centrally with the first. It's slightly scew. .copy { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; text-align: center; padding-right: 20px; padding-left: 20px; text-decoration: none} a.copy:hover { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; padding-right: 20px; padding-left: 20px; text-decoration: underline; text-align: center;} O.k. I'm stumped... I have a gap about 5px at the top of my site in Opera 8.02 which reveals my background graphic and setting the top margin to 0px in both my body and wrapper div does nothing to solve it. It renders fine in FF 1.06 and IE6, and yes, everything validates fine. My Website My css file My gratitude ahead of time. [edit] Did a little deeper search and solved my problem. Opera uses padding as a default, not margins. So setting padding to: Code: body {
padding: 0px /*Opera hack*/
}
Removed the gap issue [/edit] I am trying to get these 2 divs, which are going to be acting as a "tab" off of the main layout of the page. The first one for Personal is working and displaying correctly as far as I can tell, but something is wrong with my Business one. It doesn't seem to be taking any of my styles for displaying that tab correctly, either that or the position is totally off. If anyone could help me out I'd greatly appreciate it. Here's the css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff;
}
#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
background: #ededed;
}
#accountselector-home {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: #ffffff;
}
#acccountselector-business {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: url("accountselectorleft.png");
}
#headerwrapper {
position: relative;
margin-top: 5px;
width: 100%;
height: 300px;
}
#headerwrapper-left {
position: relative;
float: left;
min-width: 64%;
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: #ffffff;
}
#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 25px;
width: 100%;
line-height: 25px;
}
#headerwrapper-left-banner {
position: relative;
height: 200px;
width: 100%;
border: thin solid #939393;
}
#headerwrapper-spacer {
width: 12px;
height: 100%;
float: left;
background: #ffffff;
}
#headerwrapper-right {
position: relative;
float: left;
width: 33%;
height: 100%;
border: thin solid #939393;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
line-height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
float: left;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
float: left;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
And the html: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id="accountselector-wrapper"> <div id= "accountselector-home">Personal</div> <div id= "accountselector-business">Business</div> </div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id= "headerwrapper-spacer"> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage My Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Thanks Hi folks Hoping a CSS expert out there might be able to assist. I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768. The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator. In Opera, it is fine at 800x600, but does not render properly at 1024x768 Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari. I am guessing it is something to do with #text ? Do I need to clear: or something like that? If you can help, I would be grateful. Thanks in advance Sol www. waihekemagicmassage.com And: /magic.css OK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> hello i have a div acting as a container for a layout and i'm using the following to center it on the browser window, having a background image and two borders: Code:
#master { position: relative; top: 0;
width: 46em;
margin: 0 auto;
background-image: url(../img/bg/.gif);
border-right: 1px solid #FA933C;
border-left: 1px solid #FA933C;
}
this works great on internet explorer, however, on other browsers it doesn't do so well; on netscape it centers the layer but it doesn't display the background/borders. on firefox it does the same thing. on opera it centers and displays the background, but it leaves a gap between the top margin and the top of the layer, even though the document margins are set to zero. is there a way to fix this? i suppose i could use position: absolute and then figure out a percentage away from the left margin... but this way is a lot better since the browser figures everything out neatly. hope someone can help out. thx in advance! Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 {
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
text-align:center;
}
.footer_header_link{
text-align:center;
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
}
You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks Hi, I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is). i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically. Many thanks! I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? Is there a way to align something from the bottom of the page? Is there a way to center the entire page using CSS? Reidy I have a single column layout with a fixed width (say, 700 px), centered in the window, composed of header, body, and footer divs in a wrapper div. I would like background images, left and right of the center column (two images, because they sort of fade up to the edge of the centerd div). How is this done? I have a div sitting on a html page that will be included in the main page. I include this page into a table and I would like the div to be centered horizontally inside the table cell. It isn't working for me at the moment. Am I doing something wrong? Here is what I have so far: Code: #mybox{
border-style: solid;
border-width: 1px;
border-color: #000000;
padding: 5px;
width: 400px;
left-margin:auto;
right-margin:auto;
}
Brad. I am trying to center this entire page, and it does show up centered in IE; however, after checking with BrowserShots.org, in all browsers other than IE, the header image is centered, but the rest is aligned on the left side....??!! Here is the page: http://www.georgiaspinal.com/indexTESTBR2.html Here is the CSS file I am using: Code: body {margin:25px; font:12px Verdana, Arial, Helvetica; }
* {padding:0; margin:0}
#wrapper {
text-align: center;
width: 770px;
margin-left: auto;
margin-right: auto;
}
.hidden { display: none; }
.unhidden { display: block; }
<div id="article" class="hidden">
Thanks for any help here!!! |
|||||||