|
CSS - Ie Problem With Css Centred Layout
hey out there, 1st post so here goes:
i've been designing our new website in css. it looks great in the following browsers: pc: ie6, ns7, firefox 1, mozilla 1 and above and opera 7.5 and above. mac: ns7, firefox 1, mozilla 1 and even safari. however, the centre layout totally breaks in ie 5.2 on a mac and i cant find out why. it's centring the content horizontally but not virtically. i *think* it's got something to do with static and relative positioning and the mac ie seems to be ignoring it. is there a hack i'm missing? this is the site: http://62.49.5.36:8181/28design/index.asp (ignore the black outlines on the divs, this is pury so you can see each div) and this is the main css that controls the centred layout and the navigation: /* controls for centering the page */ #centreTable { width: 100%; height: 100%; } #centreTable td { vertical-align: middle; text-align: center; } #containerDiv { position: relative; text-align: left; margin-left: auto; margin-right: auto; width: 750px; height: 400px; z-index:1 } #containerBckDiv { position: absolute; background-image: url(../images/28bck.gif); background-repeat: no-repeat; background-position: right top; position: relative; text-align: left; margin-left: auto; margin-right: auto; width: 750px; height: 400px; } /* end */ /* controls for the main website areas */ #navDiv { position: absolute; top: 0px; left: 0px; width: 340px; height: 40px; } /* the discTxtDiv needs styling but gets it's ID name from the rs*/ .discTxtDiv { position: absolute; top: 40px; left: 0px; width: 340px; height: 80px; visibility: hidden; } #subNavTxtDiv { position: absolute; top: 120px; left: 0px; width: 170px; height: 40px; } #subNavDiv { position: absolute; top: 120px; left: 170px; width: 170px; height: 40px; } #jobTitleDiv { position: absolute; top: 160px; left: 0px; width: 170px; } #jobInfoDiv { position: absolute; top: 160px; left: 170px; width: 170px; } #contactDiv { position: absolute; top: 265px; left: 0px; width: 117px; height: 85px; } #imageDiv { position: absolute; top: 0px; left: 350px; width: 400px; height: 400px; } /* end */ as always, any suggestions are grand, cheers, jake Similar TutorialsHi, I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list. I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this. At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code: div#header ul li {
width: 20%;
padding: 0px;
}
If the elements become four then I would set the width equals to 25% and so on. I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list. My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width. Is this possible? Or I have to always set the width of the li element? I am sorry if I am not clear enough. Thanks for any suggestions. Regards, Sim085 I have a simple query, and don't know if this can be done. I have a <div> layer, which is centred on the page, and I am trying to get another <div> within that to be centred as well. I have a sample page on http://jimpix.co.uk/002.htm which shows that this doesn't work. This is my code: ######################################### <html> <head> <style> body { text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 50%; text-align: left; border:10px solid pink; } div#container2 { margin-left: auto; margin-right: auto; width: 50%; text-align: left; border:10px solid red; } </style> </head> <body> <div id="container"> <div id="container2">test</div> </div> </body> </html> ###################################### I thought that the 2nd div, would sit centred in the middle of the first one. Can anyone suggest what I am doing wrong, or if there is a way this can be done? Thanks Jim I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this: Code: <!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
#printhead {
display:none;
}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #EAEBEB;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
}
#info {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #666666;
padding-right: 25px;
padding-left: 25px;
}
#head {
position:absolute;
width:800px;
height:137px;
z-index:5;
border-top-style: none;
border: none;
background-color: #FFFFFF;
left: -400px;
margin-left: 50%;
}
.top-spacer {
display:block;
height:137px;
}
.btm-spacer {
display:block;
height:30px;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
min-height: 100%;
margin-bottom: 1px;
}
body {
padding:0;
margin:0;
border:0;
}
#content {
display:block;
position:relative;
z-index:3;
word-wrap:break-word;
}
#head {
display:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#printhead {
height:100px;
background:#fff;
font-size:24pt;
color:#000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div class="top-spacer"></div>
<div id="info">
<p>Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here </p>
<p> </p>
</div>
<div class="btm-spacer"></div>
</div>
</body>
</html>
Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't. Can anyone suggest a workaround for this? Thanks. I have a site which uses a centred frame DIV for its content, as achieved by the normal technique of: margin-left: auto; margin-right: auto; with the text-align: centre/text-align: left workaround for IE. The problem is that some pages are longer than the viewport, resulting in an overall vertical scrollbar. On those pages, In Firefox, Mozilla, and Opera, the content is centred in the space which remains after the vertical scrollbar is in place. This means that, when moving from a short page to a long page, or vice-versa, the whole page content moves from side to side. This does not happen in IE. To see what I am talking about, go to the following page: http://www.clearsight.info/demo/index.php?pageId=5 Click on the top link in the main text frame ("The Lindisfarne window"), and then go back and forth between the two pages. No problem in IE, but in FF/Moz/Opera, the page dances before your eyes. Is there any way around this? Thanks Tom Please have a look in the attached example: the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side. Anyone with some advice? Hi all, So I've been looking at this Glish template and I've been trying to create a website with it. The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others. Is there any way to prevent this and make sure that column starts at the top, with the others? Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable? Thanks. Hi, I'm really stuck with a template i'm making. it looks kind of o.k. in firefox Win XP, but it's screwed up in IE6 on Win XP. tried to many ways, but can't seem to solve it. template: http://www.thestateofdesign.com/template.php CSS: http://www.thestateofdesign.com/css/the_state_css.css I want the content [left & right content] to be situated under the headers, of course the left column on the left, and the right column next to the left, with a footer underneath it. in IE the footer and rightcolum move to the right. Tried to use positioning absolute, but that screws up the footer. Any help greatly appreciated, Cheers, Jarra Hi, Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links) h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0 and h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0 The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers. In the style sheet a div tag positions the address : #address {clear:both;position:relative; font-size:smaller; top: 40px; left: 0px; width: 145px; height: 80px; } I've used <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" /> <![endif]--> In the page the address is written as: <div id="address"> <div align="right">The Company Name Inc.<br> 1234 Glenn View Road<br> Hilldale, OW 12345<br> 123-456-7890</div></div> ...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect. A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address. I want to know a fix that will position the address correctly about 40px below the menu. Thanks IE 7 has caused a problem with the layout on our website. The website worked fine with IE 6. http://www.membersequity.com/mcard/ Can anyone help determine what the problem is? Thanks. Im tying to have a simple layout with a floating box in the lower right corner. As it is now the floating box is in the top right corner of the body of the box. I just can not get it to look right in the lower right section. Click here. this is a pic of how it looks now Here is the code for the layout CSS Code:
/* main box */
.faq-def-block {
position: relative;
left: 30px;
width: 500px;
background-color: #FFFFCC;
border: 1px solid #000000;
-moz-border-radius: 0px 0px 8px 8px;
color: #000000;
font-size: 12px;
}
/* top line*/
.faq-def-block-header {
border-bottom: 1px solid #000000;
background-color:#FFCC66;
padding: 0 0 0 2px;
}
/* floating box */
.faq-def-block-footer {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width: 60px;
float: right;
text-align: center;
background-color:#FFCC66;
-moz-border-radius: 0px 0px 0px 8px;
}
/* body text
.faq-def-block-body {
padding: 0 0 0 6px;
}
HTML Code:
div class="faq-def-block">
<div class="faq-def-block-header">Climatic Wind Data for the United States through 1996 Publication</div>
<div class="faq-def-block-body">
<div class="faq-def-block-footer">
<a href="http://www5.ncdc.noaa.gov/documentlibrary/pdf/wind1996.pdf" target="_blank">
<img src="../images/download-icon.gif"
alt="Climatic Wind Data for the United States through 1996"
width="50"
height="50"
border="0"></a><br>
Download<BR>
PDF<br>
(102KB)
</div>
Climatic wind data in this summary were extracted from the NCDC's Edited Local
Climatological Data publication, Air Force and Navy climatic briefs, and other
sources. The total period of this summary is 1930-1996, though the period of record
(POR) for which wind data is summarized varies for individual locations, and may begin
and end at any time during the 1930-1996 period. Wind summaries from a total of 321 stations
from all U.S. states are presented. The wind elements summarized by month and overall annual
values include prevailing wind directions (given in compass points), mean wind speeds, and
either peak gusts (in miles per hour), fastest-mile, or highest 5-second winds. Peak wind
types may be combined to reflect the highest reported wind. Updated wind data for many sites
can be obtained from the post 1996 Edited Local Climatological Data - Annual publications.<br>
</div>
</div>
Thanks Tekjock Hi, I am new to using CSS to do my layout rather then tables. So far its working out well, and I can see the advantages in the long run. I am running into a small snag right now, that I was hoping someone might be able to help me out with. The site is succesfully displayed he http://www.yourbeergear.com/group/stackhouse/news.php But I found whenever the CENTER column is NOT the longest, it goes wonky, as seen he http://www.yourbeergear.com/group/stackhouse2/news.php The code I'm using basically runs like this Code:
<!-- Header -->
<div id="header">
<div align="center">HEADER</div>
<!-- end of Header --></div>
<!-- center column -->
<div id="c-block">
<div id="c-col">
//CONTENT
</div>
<!-- end of center column --></div>
<!-- FOOTER -->
<div id="footer" align="center">
<div align="center>FOOTER</div>
</div>
<!-- end of FOOTER -->
<!-- left column -->
<div id="lh-col"><br />
<h4 align="center">Left Column</h4>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"><br />
<h4 align="center">Right Column</h4>
</div>
<!-- end of right column -->
and the CSS file is as follows Code:
/* Layout Stylesheet */
body{
margin: 0;
padding:0;
background:#808080;
color: #333333;
}
#lh-col{
position:absolute;
top:62px;
left:0;
width:140px;
z-index:3;
background:#c0c0c0;
color: #333333;}
#rh-col{
position:absolute;
top:62px;
right:0;
width:140px;
z-index:2;
background:#c0c0c0;
color: #333333;}
#c-block {
width:100%;
z-index:1;
background:#c0c0c0;
color: #333333;
height:80%;}
#header{
height:60px;
border-bottom:1px solid #000000;
width:100%;
background:#eeeeee;
color: #333333;
margin:0;
}
#c-col{
margin:0 142px 0 142px;
position:relative;
background:#ffffff;
color: #333333;
z-index:5;
border: solid #000000;
border-width:0 1px;
}
#footer {
width:100%;
height:35px;
border: solid #000000;
border-width:1px 0;
background:#eeeeee;
color: #333333;
margin:0;
}
Hi, I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly? See page layout here Code: <!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" xml:lang="en" lang="en"> <head> <title>This is really beginning to annoy me!</title> <meta http-equiv="expires" content="-1" /> <meta name="robots" content="no-index" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="ContentBox"> <div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div> <div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div> <div id="leftSide"> Quick Navigation <form><p></p></form> <img src="" border=0 alt="" /> <ul class="prodsnav"> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li> </ul> </div> <div id="centerSide">Center column</div> <div id="rightSide">righthand column</div> </div> </body> </html> ...the CSS Code:
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #fff;
font-family: arial, sans serif;
font-size: x-small;
font-style: normal;
font-weight: 400;
}
#ContentBox {
width:810px;
height: 100%;
margin:0 auto;
text-align:left;
padding:0px;
border: 1px solid #c2dacd;
background-color:#fff;
vertical-align: top;
}
#leftSide {
width: 166px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0;
padding-top: 24px;
display: inline;
vertical-align: top;
background-color: #f00;
}
#centerSide {
width: 450px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #0f0;
}
#rightSide {
width: 177px;
height: 99%;
border: 0;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #00f;
}
div.logo {
width: 100%;
height: 50px;
background-color: #c2dacd;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
vertical-align: left;
display: block;
}
#mainmenu {
height: 28px;
width: auto;
vertical-align: top;
padding: 0px;
display: inline;
border: 0;
font-size: 1px;
background-color: #0f0;
}
div.blulinetop {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 2px;
margin-bottom: 2px;
font-size: 1px;
vertical-align: top;
}
div.blulinebot {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
vertical-align: top;
}
/* products nav */
ul.prodsnav {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}
li.prodsnav {
padding: 4px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
height: 18px;
width: 165px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
}
img.prodNav{
display: inline;
}
What to do? un-Wizeone today Css Layout Problem -------------------------------------------------------------------------------- This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks Hello, I'm having issues with a new layout in IE 6. The HTML is as follows: Code: <div id="gsContainer">
<div id="gsLeftBorder"></div>
<div id="gsRightBorder"></div>
<div id="gsContent">
<div id="gsHeader">Heading</div>
<div id="gsBox">
Some content
</div>
</div>
</div>
The CSS is as follows: Code: #gsContainer {
position: relative;
width: 795px;
height: 185px;
margin: 0 0 15px 0;
padding: 0px;
}
#gsLeftBorder {
float: left;
position: relative;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/Left.gif);
background-repeat: no-repeat;
height:185px;
}
#gsRightBorder {
position: relative;
float: right;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/GreenRight.gif);
background-repeat: no-repeat;
height:185px;
}
#gsContent {
position: relative;
height: 185px;
margin-left: 4px;
margin-right: 4px;
width:779px;
padding: 0px;
}
#gsHeader {
position: relative;
height: 25px;
margin: 0px;
padding: 6px 0 0 10px;
width:769x;
color: #fff;
font-size: 14px;
font-family: arial;
font-weight: bold;
background-image: url(/images/Header.gif);
background-repeat: repeat-x;
}
#gsBox {
position: relative;
height: 129px;
margin: 0px;
padding: 25px 5px 0px 31px;
width:743px;
color: #000;
font-size: 11px;
font-family: verdana;
background-image: url(/images/Back.gif);
background-repeat: repeat-x;
}
The display looks fine when I test in IE 7, FF2, and Safari, with the content appearing with a clean "header" on top, and some inner content with borders on the left & right side. However, when viewing in IE6, the inner content (div "gsContent") is somehow too wide, and is pushed to the live after the "gsContainer" div. When I play with the widths, if I shave 8px of width off gsContent and its inner divs, then the alignment is fixed, but there is spacing between gsLeftBorder & gsContent as well as gsContent & gsRightBorder Any ideas how I can resolve this? http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom. example From the example above, I want to footer to sit below the menu. I can't seem to get this to work. Here's my code. Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:white;
}
#header {
height:50px;
background-color:#0755AB;
text-align: center;
}
#content {
width:100%;
height:200px;
margin:0px 0px 0px 150px;
background-color:#008080;
text-align: center;
}
#menu {
position:absolute;
top:50px;
left:0px;
width:150px;
height:300px;
background-color:#FF9F9F;
text-align: center;
}
#footer {
height:30px;
background-color:gray;
text-align: center;
position: relative;
}
Hi I'm trying to layout some information on a page that would previously have been designed using a table structu Code: <table>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
</table>
But now have tried to redesign the layout using the following CSS: Code: #boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}
#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here? Many Thanks. Hello there. I Have a small problem i think. I have an layout which i want to have heights in %. This seems to be difficult. In the attachement i have an example of how it is ment to look. The header should be 135px height. The 2 leftside blocks should be 50% of the page which is left, and not the whole page (viewport). I Don't have an good example, becouse i can't figure it out :S. If someone has an link to somekind of div-builder or fluid design builder etc.. that would be nice . Thx in advanced. |
|||||||