CSS - Css Layout Head Scratcher Problem

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.

My first post here and it promises to be a doozie!

I am new to CSS and I have been trying to use it in lieu of tables. So far I have learned a great deal and made great progress, but I'm not here to tell you of my success of course. I am here to tell you my problems!

Basically I am trying to create a fluid background. It consists of a 3x3 arrangement of divs. Like this:

ABC
DEF
GHI

They are arranged via float:left, and A,D,G all have clear:left.

A,C,G,I are the rounded corners with known widths and height, so they are static. All the others (B,D,E,F,H) are fluid.

The content is in E and should be the governing factor for the widths and heights of the fluid elements but I cannot seem to figure out how to make, for example, the heights of D and F match the height of E.

I am reluctant to post all my code in here because it seems like a lot, but if it would help clarify my problem then I will.

I hope my question is clear. I really need help but I don't know how to put it simply.

Thanks!

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.

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;
}

Been pulling my hair out all day over this. Got most of the bugs figured out, but these last two I have no clue about. Both problems only seem to happen in IE7

Site is here.

First problem is with the navigation bar, when I mouse over the bottom three links (recent projects, news, and contact us), it shifts the down for some reason.

Second problem, Right below the innovative & efficient areas, the footer seems to come up and cover that area. Please, any help is really appreciated. Thanks!

Hi.

I have a "small" problem.
I am using NiftyCorners (http://www.html.it/articoli/nifty/index.html) and whenever the
corner is added to a nav bar at the top of my page, the link in
the nav moves down a bit, making it lower than the rest. I have
tried playing with padding, margin, etc but can't seem to get the link position to stay put.

I am trying to get my nav bar to work like the one in the below link:

http://boardreader.com/pop/films/-/-/90.html?o=90

I am guessing it has to do with the fact that the containing div is blocking it? Any ideas how to prevent the shift in the link position?

Code below and Image of problem attached....

Thanks!

Code:

<table style="width: 100%; height: 100px; padding: 10px;" cellspacing="0">
        <tr style="width: 100%;">

            <td style="width: 100%">
                
<script type="text/javascript"></script>
<form name="searchform" action="/search.aspx" style="margin: 0pt; display: inline;">
<input name="a" value="f" type="hidden">	
<input name="z" value="1" type="hidden">
    
    <div id="logo" style="float:left; top:0px;">
        <div>
        <a href="http://www.x.com" tabindex="-1" class="logoimg"><img src="http://pics.x.com/aw/pics/logos/logo_x45.gif" alt="X" border="0" height="45" width="110" /></a>
        </div>
    </div>

    
    <div id="mastermenu" style="top:16px; left:128px; border-bottom:solid 1px black; right:15px; position:absolute">
            <div>&nbsp;&nbsp;&nbsp;<span><script type="text/javascript">//WRITE LOGIC FOR SIGNIN OR REGISTER HERE</script>Hello! <a href="http://www.x.com/singin/signin.aspx">Sign In</a>&nbsp;or&nbsp;<a href="http://www.x.com/registration/register.aspx">Register</a>.</span></div>
            <ul id="mastertabslist" style="padding-top:9px;">
                <li><a href="../today/today.aspx"><span>Home</span></a></li>
                <li><a href="../looking/looking.aspx"><span>Community</span></a></li>

                <li><a href="../search/search.aspx"><span>Search Tools</span></a></li>
                <li class="help"><a href="#nogo"><span>Help</span></a></li>
            </ul>
    </div>
    
    <script type="text/javascript">
     [SNIP...]
    </script>
    
<div id="search_main" style="float:right; height: 95px; width:350px; border:solid 1px red; padding-top:5px;">
            <div style="float:left; width:50px; height:20px; vertical-align:bottom; margin: 0 5%;">Search&nbsp;in:</div>

	        <div id="div_videos" style="float:left; width:50px; height:20px; padding-left:10px;"><a href="#nogo" id="search_videos" class="" style="cursor:pointer;" onclick="switch_search_videos(this.id);"><span>Videos</span></a></div>
	        <div id="div_images" style="float:left; width:50px; height:20px; background-color:#6699CC;" class="is_menu"><span style="padding-bottom:5px; vertical-align:top; margin-bottom:5px;"><a href="#nogo" class="l_link" id="search_images" style="cursor:pointer;" onclick="switch_search_images(this.id);">Images</a></span></div>
	        <div id="div_profiles" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_profiles" style="cursor:pointer;" onclick="switch_search_profiles(this.id);"><span>Profiles</span></a></div>
	        <div id="div_forums" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_forums" style="cursor:pointer;" onclick="switch_search_forums(this.id);"><span>Forums</span></a></div>
	        
	        <div id="search_box" style="background-color:#6699CC; position:relative; width:330px; float:left;">
	           <span>&nbsp;&nbsp;&nbsp;</span>

	           <input class="query" name="q" type="text">
		       <input class="submit" value="Search" type="submit">
	           <a class="adv" href="/index.search.aspx?a=a&x=1">Advanced search</a>
	           <br />
	        </div>

     </div>	        
</form>

            </td>

        </tr>
</table>

Check this page:

http://www.putimg.net

On Ie the adsense div is staying on the other div.... This is the adsense div css:

#adsense {
position:absolute;
margin-top:20px;
border:0px;
width:120px;
height:240px;
}

Solved it:

#adsense {
position:absolute;
margin-top:20px;
left:5px;
border:0px;
width:140px;
height:240px;
}

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.

I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height.

See www.eyeongames.com

This is how it should look, but if you increase the font or the right or left columns expand, then the middle column shifts up or down.

I want the columns to be even across the top.

Thanks in advance!

Here is the style sheet code I am using.


Code:

a { 
   background: transparent; 
   color: #ff8f02; 
   text-decoration: none; 
} 

a:hover { 
   color: #fff; 
} 

body { 
   background: #550a04; 
   color: #d7cf00; 
   font-family: Verdana, Arial, Sans-serif; 
   font-size: 12px; 
   margin: 10px; 
   padding: 0; 
} 

form { 
   margin: 0; 
} 

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

hr { 
   background: #abc; 
   border: 0 none; 
   color: #abc; 
   height: 1px; 
   margin: 0; 
   padding: 0; 
} 

img { 
   border: 0 none; 
} 

p { 
   margin: 5px 0px 5px 0px; 
   padding: 0; 
} 

th,td { 
   padding: 2px; 
} 

div.leftColumn { 
   background: transparent; 
   border: 0px solid #555; 
   left: 10px; 
   padding: 5px; 
   position: absolute; 
   top: 400px; 
   width: 240px; /* Incorrect IE5 value */ 
   z-index: 2; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 218px; 
} 

html>body div.leftColumn { 
   width: 218px; 
} 

div.leftColumn2 { 
    background: transparent; 
    border: 0px solid #555; 
    left: 10px; 
    padding: 5px; 
    position: absolute; 
    top: 143px; 
    width: 240px; /*Incorrect IE5 value */ 
    z-index: 2; 
    voice-family: "\"}\""; 
    voice-family: inherit; 
    width: 218px; 
} 

div.topColumn { 
    background: transparent; 
    border: 0px solid #555; 
    margin: 0px 200px 0px 130px; 
    min-width: 200px; 
    padding: 0px; 
    position: relative; 
    width: 600px; 
    z-index: 3; 
} 

div.middleColumn { 
   background: transparent; 
   border: 0px solid #555; 
   margin: 0px 200px 10px 240px; 
   min-width: 200px; 
   padding: 5px; 
   position: relative; 
   top: -105px; 
   width: 480px; 
   z-index: 3; 
} 

div.middleColumn2 { 
   background: transparent; 
   border: 0px solid #555; 
   top: 0px; 
   margin: 0px 200px 10px 240px; 
   min-width: 200px; 
   padding: 5px; 
   position: relative; 
   width: 480px; 
   z-index: 3; 
} 

div.rightColumn { 
   background: transparent; 
   border: 0px solid #555; 
   padding: 5px; 
   position: relative; 
   top: 43px; 
   margin: 0px 0px 0px 742px; 
   width: 240px; /* Incorrect IE5 value */ 
   z-index: 1; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 218px; 
} 

html>body div.rightColumn { 
   width: 218px; 
} 

div.logoBlock { 
   background: transparent; 
   border: 0px solid #555; 
   left: 10px; 
   margin: 0; 
   padding: 0; 
   position: absolute; 
   text-align: left; 
   top: 10px; 
   width: 210px; /* Incorrect IE5 value */ 
   z-index: 2; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 125px; 
} 

html>body div.logoBlock { 
   width: 188px; 
} 

div.copyrightBlock { 
   background: transparent; 
   margin: 0px 200px 0px 200px; 
   min-width: 200px; 
   padding: 0; 
   position: relative; 
   text-align: center; 
   width: 500px; 
   z-index: 3; 
} 

*.newItem { 
   color: #ff5500; 
} 

*.oldItem { 
   color: #fff; 
}

Here is part of the code.

There are multiple index.tpl files with similar code only the content changes, such as when browsing the games.

header.tpl

Code:

<div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
   <h3>{HEADER_BLOCK1_TITLE}</h3>
   <hr />
   <p><--- LINKS EDITED OUT ---></p>
   <h3>{HEADER_BLOCK2_TITLE}</h3>
   <hr />
   <p><--- MORE LINKS ---></p>
   <h3>{HEADER_BLOCK3_TITLE}</h3>
   <hr />
   <form><--- FORM CODE ---></form>
   <h3>{HEADER_BLOCK4_TITLE}</h3>
   <hr />
   <p>{HEADER_BLOCK4_CONTENT}</p>
   <!-- <hr />
   <p>{BACKEND_RSS}</p>
   <p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
   </tr>
   </table>
   <p align="center">{GAME_RSS}</p>
   <!-- <p align="center">{GAME_TXT}</p> -->
</div>

footer.tpl

Code:

<div class="leftColumn2">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
   </tr>
   </table>
   <p>{BACKEND_RSS}</p>
   <!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
   <p><--- COPYRIGHT ---></p>
</div>
</body>
</html>

index.tpl

Code:

<div class="middleColumn">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
   </tr>
   </table>
</div>
<!-- <div class="middleColumn">
   <p>{BACKEND_RSS}</p>
   <p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
   <h3>{NEWS_SUBJECT}</h3>
   <h5>{NEWS_INDEX_RELEASE}</h5>
   <hr />
   <p><--- NEWS TEXT ---></p>
   <p>{NEWS_SOURCE}</p>
   <hr />
   <p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>

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

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,

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

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