|
CSS - Problem With Positioning And Tables
I have a problem with positioning elements on a page. It is no problem to position everything (text, header, logo's, banners) but somehow the div or table that contains the content of page does not grow when the contents do (it's the div/table with the white background).
It is no problem to position everything exactly including the background table but then when the text grows longer the table or div ( I tried both and both give the same problem ) does not grow longer so part of the text is not readable anymore. Wierd thing is that when I only give the main div positions and not the text and images the div will adapt to it's contents but then I can't position my header as I want to. The page is located here and the css is attached to this post as a txt file. What did I overlook? I've searched the internet but I can't find anything. Similar TutorialsHi there, I would like to know from css veterans when and why are tables needed inside a web layout built mainly by css. If they are at all. Best regards, - Dehumanizer In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done? You can see the code in action HERE. Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
#div1, #div2, #div3, #div4
{
padding: 10px;
margin: 0 auto;
overflow: auto;
display: none;
border 1px;
}
fieldset
{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
//]]>
</script>
</head>
<body onload="change('div1');">
<h1>Switch Divs</h1>
<form method="post" action="">
<fieldset>
<legend>This is my form</legend>
<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
<div id="div1">
<input class="input-box" type="text" name="search_name">
</div>
<div id="div2">
<input class="input-box" type="text" name="search_city">
</div>
<div id="div3">
<select name="search_state" size="1">
</select>
</div>
<div id="div4">
<input class="input-box" type="text" name="search_zip">
</div>
<div><input type="submit"></div>
</fieldset>
</form>
<p>Some Content</p>
<table border="1" width="100%">
<tr>
<td>Some other Content</td>
</tr>
</table>
</body>
</html>
Hi, I spend many hours on the net to fix this problem, hope you can help me. I made a site with 3 frames; header, menu and main. In the menu I made a table (width and height 100%), with rows with one cell each. In each cell is a link. With some links I want to choose between more pages. So I found a nice dhtml menu, witch looks like http://dhtml-menu.com/examples/dhtml-menu-ex2.html. Everything works fine, ecxept the position of the submenus. Here is some HTML: <table><tr><td> <a href="#" target="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime();" onMouseOut="startTime();">Name</a> </td></tr></talbe> ... <div id='layer1'> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name</a><br> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name2</a><br> </div> And here is some CSS: #layer1, #layer2, #layer3, #layer4 { position: absolute; z-index : 90; visibility : hidden; width : 150pt; left: 10pt } #layer1 { top : 0pt } Questions: 1 is it possible to position the submenu exactly next (or under or above)to the corresponding main menu item, I think it should be with relative positioning. 2 since I use frames and the menu takes the left frame, is it possible to position this submenu on the right side of the main menu item, i.e. on top of the main frame, or in the main frame. 3 I read a lot about this and many people say that a page like this should be made using tables (or CSS-P?), instead of frames. If I have to or want to change it, does that mean that I have to write a table structure in every page and when I want to change a menu item, I have tot change that in every page? Hope some can help me! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi I have a positioning problem. The test page is here www .treehuggercards .co .uk/drop+pnktest .htm - ok so if you can't find the link here are the two css files and the html: this styles the site: /* CSS Document */ Code:
/* Main Styles that apply to body */
body {
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
padding-left: 50%;
background: #f4f4f4 center repeat-y;
position: absolute;
}
/* This is the page container built and centered using -ve margins */
#container {
width: 700px;
margin-left: -350px;
}
/* The topmost faded bar */
#topbar {
width:auto;
background: #EEE;
height: 20px;
padding: 10px 5px 5px 2px;
font: normal 115%/1.25em Arial, Helvetica, sans-serif;
color: #7C484A;
text-align: right;
text-transform: capitalize;
}
/* This holds the two heading blocks, the title and the login form */
#headerwrapper {
width: auto;
border-top: medium solid #FFFFFF;
border-right: none;
border-bottom: 1px solid #26240F;
border-left: none;
background-image: ;
background-color:#FF99CC;
background-repeat: no-repeat;
background-position: right bottom;
height: 110px;
}
h1.name {
font-family:"Edwardian Script ITC";
color: #FF6699;
font-size: 450%;
line-height: normal;
font-weight: normal;
padding-left: 25px;
}
h1.subname {
font-size:300%;
font-family: "Edwardian Script ITC";
font-weight: normal;
padding-bottom: 5px;
line-height: .25em;
padding-left: 50px;
padding-top: 10px;
}
/* class that styles the holder div of the forms */
.userform {
width: auto;
color: #DD7CB4;
padding: 5px 0px 5px 3px;
background: #fbfbfb;
border:1px solid #efefef;
border-top: none;
text-align: justify;
margin-bottom: 1px;
}
/* This will style the login and search */
.userform input {
border: 1px solid #DDD;
font-family: verdana;
font-size: 10px;
color: #BBB;
font-weight: bold;
}
h1 {
font: 75% verdana;
color: #EEE;
margin: 5px;
}
h6 {
font: 10px verdana;
font-weight: bold;
color: #DDD;
margin: 0px;
padding: 0px;
margin-left: 8px;
}
/* This holds the tabs */
#tabholder
{
width: auto;
}
/* Container for the article box, and the pic box */
.articleboxouter {
width: auto;
padding: 0px 6px 0px 5px;
clear: both;
}
/* Content holder for the articles */
.articleboxinner {
width: auto;
line-height: 20px;
color: #DD7CB4;
padding: 15px 6px 0px 6px;
background: #fbfbfb;
border:1px solid #efefef;
text-align: justify;
height: 220px;
}
/* The title style for the main article */
.articleheader
{
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #CCC;
}
/* This will style the read more thing at the bottom */
.readmore {
text-align: right;
display: block;
width: auto;
}
/* This controls the main pic in the main article box */
.mainpiccontrol
{
border: 1px #DBB7DB solid;
float: left;
margin-right: 10px;
}
/* Container for the pic thumbnails */
.picboxouter {
width: auto;
padding: 0px 6px 0px 5px;
clear: both;
}
/* Content holder for the pic box */
.picbox {
width: auto;
line-height: 22px;
color: #DD7CB4;
padding: 5px 6px 6px 6px;
border:1px solid #efefef;
border-top: none;
text-align: center;
}
/* This controls the thumbnails in the picbox div */
.pickboxcontrol
{
border: 1px #DDD solid;
vertical-align: middle;
}
/* Sometimes, I don't want borders around my hyperlink images */
.noborder {
border: none;
}
/* For taming those leeeeeeetle arrows */
img {
vertical-align: text-bottom;
}
/* Style-up those ugly default hyperlinks */
a {
text-decoration: none;
padding: 0;
margin: 0;
color: #663366;
}
/* And their ugly hover states too */
a:hover {
text-decoration: underline;
}
/* Why should the humble footer be left out? */
#footer {
background-color: #CCC;
color: #fff;
text-align: center;
vertical-align: middle;
height: 20px;
padding-top: 5px;
clear: both;
}
/* This will contain the three columns */
#newsContainer2
{
width:auto;
background-color: #E0E0E0;
}
/* First column of the three columns */
.c1
{
width: 227px;
background-color: #F7F4F7;
border: 1px solid #DDD;
border-top: none;
line-height: 22px;
color: #DD7CB4;
float: left;
}
/* Second column of the three columns */
.c2
{
width: 230px;
float: left;
border-bottom: 1px solid #DDD;
line-height: 22px;
color: #DD7CB4;
}
/* Third column of the three columns */
.c3
{
width: 228px;
background-color: #F7F4F7;
border: 1px solid #DDD;
border-top: none;
line-height: 22px;
color: #DD7CB4;
float: right;
}
/* This controls the titles for each column */
.noteheader
{
width:auto;
border-bottom: 1px solid #DDD;
border-top: none;
color: #DD7CB4;
height: 24px;
font-family: verdana;
font-size: 11px;
font-weight: bold;
background: repeat-x;
}
/* And this gives the column text some breathing space */
.spacy
{
padding: 5px;
}
/* CSS Tabs */
#tabs8 {
float:left;
width:100%;
background:#F1F1F1;
font-size:93%;
line-height:normal;
border-bottom:1px solid #CCC;
}
#tabs8 ul {
margin:0;
padding:10px 10px 0 5px;
list-style:none;
}
#tabs8 li {
display:inline;
margin:0;
padding:0;
}
#tabs8 a {
float:left;
background:no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs8 a span {
float:left;
display:block;
background: no-repeat right top;
padding:5px 15px 4px 6px;
color:#eee;
font-weight: bold;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
/* End IE5-Mac hack */
#tabs8 a:hover span {
color:#591333;
}
#tabs8 a:hover {
background-position:0% -42px;
}
#tabs8 a:hover span {
background-position:100% -42px;
color: #888;
}
#tabs8 #current a {
background-position:0% -42px;
}
#tabs8 #current a span {
background-position:100% -42px;
color: #888;
}
/* End of CSS Tabs */
this styles the menu: Code:
/* CSS Document for menu */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {
/*margin:25px 0 100px 15px;
position:relative; */
width:700px;
height:25px;
z-index:100;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {
display:block;width:85px; /*alters the width of blocks*/
font-size:11px;
color:#fff;
height:25px;
line-height:24px;
text-decoration:none;
text-indent:10px;
border:1px solid #000;
border-width:1px 0 1px 1px;}
/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}
/* Set up the list items */
#pmenu li {float:left; background:#FF99CC;}
/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {
background:#FF8FC2;
color:#FF6699;
text-decoration: underline;
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {
display:block;
position:absolute;
top:-11px;
left:58px; /*this alters the position of the sub blocks*/
padding:10px 30px 30px 30px;
background:transparent ;
width:100px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}
/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}
/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}
/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#FF6699
no-repeat right center;}
#pmenu li.drop {background:#FF6699 no-repeat right center;}
/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {
visibility:hidden;
display:block;
position:absolute;
top:-11px;
left:80px;
padding:10px 30px 30px 30px;
background:transparent url(transparent.gif);}
/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}
/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}
/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */
</style>
this is the html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Treehugger Cards</title>
<!--[if gte IE 5]>
<style>
#container {
margin-left: -351px;
}
</style>
<![endif]-->
<link rel="shortcut icon" href="" >
<link href="treestyle.css" rel="stylesheet" type="text/css" media="screen" />
<link href="dropstyle.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<!-- Master Container: Centered and 700px wide -->
<div id="container">
<!-- The topmost bar -->
<div id="topbar">
to arrange an appointment please call - </div>
<!-- End of top bar -->
<!-- This holds the main header -->
<div id="headerwrapper">
<!-- This is the site title -->
<h1 class="name">Treehugger Cards </h1>
<h1 class="subname">Handcrafted Cards & Wedding Stationery</h1>
<div>
<!-- This is the site slogan -->
<br />
</div>
</div>
<!-- End of headerwrapper -->
<!-- This hold the navigation tabs -->
<ul id="pmenu">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Weddings<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Classic</a></li>
<li><a href="#">Hearts</a></li>
<li><a href="#">Conntry<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Compact</a></li>
<li class="fly"><a href="#">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Canon</a></li>
<li class="fly"><a href="#">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Lenses</a></li>
<li><a href="#">Speedlight</a></li>
<li class="fly"><a href="#">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Coolpix S10</a></li>
<li><a href="#">Coolpix L2</a></li>
<li><a href="#">Coolpix S500</a></li>
<li><a href="#">Coolpix P5000</a></li>
<li><a href="#">Coolpix 4600</a></li>
<li><a href="#">Coolpix S6 Silver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">D200</a></li>
<li><a href="#">D80</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Minolta</a></li>
<li><a href="#">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">SLR</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Flash</a></li>
<li><a href="#">Video</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a href="#">Occasions<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Tripods</a></li>
<li><a href="#">Films</a></li>
<li class="fly"><a href="#">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Compact</a></li>
<li class="fly"><a href="#">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Canon</a></li>
<li class="fly"><a href="#">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Lenses</a></li>
<li><a href="#">Speedlight</a></li>
<li class="fly"><a href="#">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Coolpix S10</a></li>
<li><a href="#">Coolpix L2</a></li>
<li><a href="#">Coolpix S500</a></li>
<li><a href="#">Coolpix P5000</a></li>
<li><a href="#">Coolpix 4600</a></li>
<li><a href="#">Coolpix S6 Silver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">D200</a></li>
<li><a href="#">D80</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Minolta</a></li>
<li><a href="#">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">SLR</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Flash</a></li>
<li><a href="#">Video</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Religious</a></li>
<li><a href="#">Invitations</a></li>
<li><a href="#"> Seasonal</a></li>
<li><a href="#" class="enclose">Contact us</a></li>
</ul>
</div>
<br class="clear"/>
</div>
<!-- End of the tabs holder -->
<!-- This is the search box and login controls holder -->
<!-- End of the login controls holder -->
<!-- Here's the box for the main article -->
<div class="articleboxouter">
<!-- Here's where you can place ur content -->
<div class="articleboxinner">
<!-- The flower image. 300px by 200px -->
<img src="images/help.jpg" alt="help" width="300" height="210" class="mainpiccontrol" />
<!-- The title for this article -->
<span class="articleheader">Welcome to Treehugger cards</span>
<br />
<!-- The preview content -->
<!-- Link to the full article, an arrow and a text link -->
<span class="readmore">
<a href="#">
<img src="images/arrow.png" alt="read more" width="12" height="12" class="noborder" />
</a>
<a href="#">Read More</a>
<br />
</span>
</div>
<!-- End of content holder -->
</div>
<!-- End of main article -->
<!-- Here's the box for some pics, remove if not a photo gallery -->
<div class="picboxouter">
<!-- All should be uniformly sized ;-) -->
<div class="picbox">
<!-- Arrow pointing backwards -->
<a href="#">
<img src="images/arrowrev.png" alt="backward" width="12" height="12" class="noborder" />
</a>
<img src="images/f1.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f2.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f3.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f6.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f7.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<!-- Arrow pointing ahead -->
<a href="#">
<img src="images/arrow.png" alt="forward" width="12" height="12" class="noborder" />
</a>
</div>
</div>
<!-- End of photogallery -->
<!-- We love three columns, don't we? -->
<!-- Holder for three columns -->
<div class="articleboxouter">
<div id="newsContainer2">
<!-- Column 1 -->
<div class="c1">
<div class="noteheader"> About Us </div>
<div class="spacy">
</div>
</div>
<!-- Column 2 -->
<div class="c2">
<div class="noteheader"> Our Customers </div>
<div class="spacy">
</div>
</div>
<!-- Column 3 -->
<div class="c3">
<div class="noteheader"> Eco Friendly </div>
<div class="spacy">
<!-- The content for this attention grabbing block -->
<br />
</div>
</div>
</div>
</div>
<!-- End of the three columns holder -->
<!-- This little whitespace will separate the page from the footer -->
<!-- Finally, here's the humble footer, holding your copyright -->
<div id="footer">
(c) Copyright 2006-2007
XHTML 1.0 Strict | Pure CSS Layout
</div>
<!-- End of footer -->
</div>
<!-- End of master container -->
</body>
</html>
Ok thanks for the input, i have amended the location for you To be honest I had the menu sorted [see www .treehuggercards .co .uk/indexth .htm and i would rather put the drop downs onto this rather than implement a new menu but i haven't built a pure css drop menu before so its bound to mess up in some of the browsers. Any way thanks for your help so far Hi there, First time posting and also my first real attempt at CSS. However I am having a problem with my initial layout. I have one main div that contains the main content of the website. The other div contains some extra information. However I want the second div to move down if the main content box is overlapping it. Currently its position attrabute is absolute. Is there any way I can get this to work. Thanks! Hello, I've been wracking my brain over this and can't seem to figure this out. I have 4 Flash buttons I created for the left-hand column of this website: http://www.heshimakenya.org/index.html I use them on every page, except one, throughout the site. On the home page, the space between each button is exactly how I want it to look. However, on the rest of the pages on the site there is extra space (or padding) between the GET INVOLVED button & READ OUR BLOG button. I cannot figure out why. Any help is much appreciated. Thanks. Sorry Pro's another Joe asking about positioning. I have my nav bar made out of a list. Oh that reminds me of another issue. But first I want the Nav bar to be under the picture. I have been tearing my hair out over it. website: argyllplotsforsale/com CSS: argyllplotsforsale/com/style.css Another problem I am having is with styling the links. It's with the a:visited. I want the link to be the same as it started. But when I try stile in the A:Visited it just stays black. Am damned if I can figure out. Help always appreciated. Cakeface I have a flashfile i am trying to put into mysite and have images as a navigation on the left. The problem i am having is that the falsh is not positioning to the top like it should be. Here is the css that i am using:- Code:
body {
text-transform: lowercase; font-family: "Trebuchet MS", Verdana, helvetica, arial, sans-serif; background-image: url(../../My Pictures/backgrounds/page-back.gif);
}
* {
padding: 0px 0px 0px 0px; MARGIN: 0px;
}
h1 {
FONT-SIZE: 200%;
}
h2 {
FONT-SIZE: 115%;
}
h3 {
FONT-SIZE: 130%;
}
h4 {
FONT-SIZE: 105%; COLOR: #cacaca;
}
h5 {
FONT-SIZE: 110%;
}
ul {
FONT-SIZE: 90%;
}
li {
LIST-STYLE-TYPE: none;
}
p {
FONT-SIZE: 80%;
}
a {
COLOR: black; TEXT-DECORATION: none;
}
#wrapper {
MARGIN: 0px auto; WIDTH: 768px; POSITION: relative; BACKGROUND-COLOR: white; margin-top:40px;
}
UL#topnav {
PADDING-TOP: 0.7em; BORDER-BOTTOM: black 1.5em solid; BACKGROUND-COLOR: black
}
#topnav A {
COLOR: white; TEXT-DECORATION: none
}
#topnav LI LI A {
PADDING-RIGHT: 0.25em; DISPLAY: block; PADDING-LEFT: 0.25em; PADDING-BOTTOM: 0.25em; PADDING-TOP: 0.25em
}
#topnav LI A:hover {
COLOR: yellow
}
#topnav LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.25em; PADDING-TOP: 0px; POSITION: relative; BACKGROUND-COLOR: black; TEXT-ALIGN: center; font-weight: normal;
}
LI#home {
WIDTH: 100px
}
LI#about {
WIDTH: 100px
}
LI#faq {
WIDTH: 92px
}
LI#contact_us {
WIDTH: 127px
}
li#account {
WIDTH: 127px
}
li#basket {
WIDTH: 111px
}
li#search {
WIDTH: 111px;
}
#topnav li ul li {
Z-INDEX: 2; WIDTH: 11em; TEXT-ALIGN: left;
}
#topnav li ul {
DISPLAY: none; LEFT: 0px; PADDING-TOP: 0.4em; POSITION: absolute; TOP: 1em;
}
#topnav li:hover UL {
DISPLAY: block;
}
#topnav li.over UL {
DISPLAY: block;
}
h1#logo1 {
BACKGROUND-IMAGE: url(../../My Pictures/hp_ss07_email.gif); MARGIN: 1em auto; WIDTH: 256px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 53px; float: left; padding-bottom: 20px;
}
h1 a {
DISPLAY: block;
}
UL#breadcrumb {
CLEAR: right; MARGIN-TOP: 0px; MARGIN-LEFT: 15px; COLOR: #cacaca; MARGIN-RIGHT: 15px;
}
UL#breadcrumb LI {
DISPLAY: inline; TEXT-TRANSFORM: capitalize;
}
#content {
CLEAR: both; PADDING-LEFT: 15px;
}
.box {
PADDING-RIGHT: 5px; BORDER-TOP: #cacaca 1px solid; PADDING-LEFT: 5px; FLOAT: left; MARGIN-BOTTOM: 0.7em; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #cacaca 1px solid; BACKGROUND-COLOR: #e4e4e4
}
.lowercase {
TEXT-TRANSFORM: lowercase;
}
#footer {
PADDING-RIGHT: 14px; PADDING-LEFT: 14px; PADDING-BOTTOM: 0px; MARGIN: 10px auto; WIDTH: 740px; padding-top: 0px; background-color: #000000; margin-bottom:0px;
}
#copyright {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: none; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; WIDTH: 730px; PADDING-TOP: 0.5em; BORDER-RIGHT-WIDTH: 0px; color: #ffffff;
}
#copyright P {
FONT-SIZE: 70%; TEXT-ALIGN: center; color: #ffffff;
}
.right {
FLOAT: right;
}
.left {
FLOAT: left;
}
.clear {
CLEAR: both;
}
.clearleft {
CLEAR: left;
}
.clearright {
CLEAR: right;
}
.hidden {
DISPLAY: none;
}
.left-align {
TEXT-ALIGN: left;
}
.center-align {
TEXT-ALIGN: center;
}
.right-align {
TEXT-ALIGN: right;
}
.margin-bottom-1em {
MARGIN-BOTTOM: 1em;
}
.margin-top-1em {
MARGIN-TOP: 1em;
}
.clearfix {
DISPLAY: inline-block;
}
* HTML .clearfix {
HEIGHT: 1%
}
.clearfix {
DISPLAY: block
}
.home#leftmenu {
width:168px; padding-top: 30px; margin:0px; float: left;
}
.home#leftmenu img {
padding-bottom:5px; padding-left:1px; padding-top:30px; float: left; padding-top: 4px;
}
.home#content {
width:580px; float: right; padding-left:6px; padding-top:0px; margin-top: 0px; clear:both;
}
Can anyone please point me in the right direction. Many thanks in advance My page is valid xhtml 1.0 strict and valid css 2, however.. i'm still having a problem. for some people, who use IE 6, are having trouble viewing my page correctly. for my (also using IE 6 and firefox) it works perfect. the address is: http://invalidheart.org/about.php the problem that happens is the content overlaps the navigation menu.. any idea why? i have NO clue.. it's driving me nuts, I want to put my page up, but I can't until i figure this out. Thanks SO much for your time css: http://invalidheart.org/default.css Hey Guys, First post, ive been learning css for the last 6 months and finally been absolutely well and truly beaten by CSS! HELP! Basically the wordpress site ive been developing works fine in every browser accept for internet explorer 6 and 7. The navigation bar is out of position and theres a white square (guessing the background colour hasnt changed. (View the attached screen shot). There is also a problem with the side bar positioning but im guessing its just the same problem as the navigation so just need help fixing that. Feel free to crit my code as much as you like, im hear to learn Thanks, Tom Annotated screen shot of the problem: http://http://img254.imageshack.us/img254/807/helpcss.png Test site up at: http://www.justlovequotes.com/ Heres the css used for the header section: Code: #header {
float: left;
width: 100%;
height: 205px;
background: url(IMAGES/headerbg.jpg);
}
#headercontent {
width: 950px;
background:#FFF;
margin-left: auto;
margin-right: auto;
}
#logo {
float: left;
background:url(IMAGES/logo.jpg);
width: 406px;
height: 143px;
display: inline;
}
#headerrightbg {
width: 473px;
height: 144px;
background:url(IMAGES/headerrightbg.jpg);
float: right;
display: inline;
}
.search-form input {
width: 150px;
float: right;
}
#advert {
margin-top: 55px;
width: 468px;
height: 60px;
}
.headertext {
display: inline;
font-size:20px;
color:#CCC;
}
#menu-topnav {
margin-left: auto;
margin-right: auto;
width: 950px;
text-transform: uppercase;
font-family:"Tahoma",Arial, verdana;
font-size: 18px;
text-shadow: 0 1px 1px #ffffff, 0 -1px 1px #000000;
border: none;
}
#menu-topnav a {
display: block;
margin-top: -11px;
line-height: 3.333em;
padding: 0 0.7em;
text-decoration: none;
text-align: center;
color: #424242;
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
-o-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
#menu-topnav a:hover{
color:#ffffff;
}
#navcontainer li {
display: block;
float: left;
position: relative;
text-align: center;
border: none;
}
#menu-topnav li.current-menu-item a {
color: #FFF;
}
My HTML/PHP: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stunt Scooters - Buyer's Guide and Fan Site</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
</head>
<body>
<div id="header">
<div id="headercontent">
<a href="http://www.stunt-scooters.com"><div id="logo"></div> </a>
<div id="headerrightbg">
<div class="search-form">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<div id="adblock"> <div id="advert"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2791419469180970";
/* Newscootersiteheader */
google_ad_slot = "0329001251";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div> </div>
<?php
// DLOCC If URL is Homepage then do this...
$homepage = "/";
$currentpage = $_SERVER['REQUEST_URI'];
if($homepage==$currentpage):
?>
<h1 class="headertext"> Stunt Scooters - Buyers Guide And Fan Site</h1>
<?php else: ?>
<?php endif; ?>
</div>
</div>
<div id="navcontainer">
<?php
$walker = new My_Walker;
wp_nav_menu(array(
'theme_location' => 'primary-menu',
'walker' => $walker
));
?>
</div>
</div>
Hi all, I used CSS to set the elements position properly but I have a weird result... I have a simple textbox and a button, next to each other; I want them be between 2 lines in a specific position. If I dont use position property, the button is wrapped above the textbox and I dont want this happen. So, I decided to use: position:absolute; for the first textbox position:relative; and with left-top I aligned the textbox. This used to work (only for mozilla, with other browsers the position is different ) But some days a problem appears also in Mozilla!!! The first time that the page is loaded, the textbox and the button get slightly up than the position that I have ordered. And once I press the button, both textbox and button goes to the correct position. The problem seems to be minor, but it is irritating that when the page is loaded the elements are not in the correct position. Any ideas? Thank you! I'm having a problem with the positioning of my navbar in IE, the problem page is http://www.mckr.ie/test.html In Opera the left navbar div and the main content div are positioned fine but in IE they go up on the page for some reason? Its strange because they are absolutely positioned. Please can you help? Here is the HTML code for the page: Code: <div id="bannerdiv"></div>
<div id="contentdiv"><!-- InstanceBeginEditable name="content" -->
<h1>Welcome to the McKeever Rowan Solicitors/Lawyers Website</h1>
<p>McKeever Rowan Solicitors is a long established Irish law firm located in the International Financial Services Centre in Dublin, Ireland. We also have an office in Paris and representation throughout the European Union through our membership of <a href="http://www.cyrus-ross.com/home.htm">Cyrus Ross International</a>.</p>
<p>The law firm has in depth knowledge of specific industry sectors, which it brings to bear in advising in these sectors and which will save clients time and resources in buying legal services. Our focus always is in providing clear legal advice of the highest quality based on a thorough understanding of the industry sector involved. </p>
<p></p>
Our areas of expertise include:
<ul>
<li> Corporate Law</li>
<li>Regulatory and Commercial Law</li>
<li>Communications and Utilities Law</li>
<li>Information Technology Law</li>
<li>Technology and Electronics Law</li>
<li>e-Commerce Law</li>
<li>Financial Services Law</li>
<li>Litigation</li>
<li>Banking Law</li>
<li>Insolvency, Bankruptcy and Corporate Law</li>
<li>Recovery </li>
<li>Commercial Litigation, Arbitration and ADR</li>
<li>General Personal Litigation</li>
<li>Property and Private Client</li>
<li>Residential Property/ Real Estate Law</li>
<li>Commercial Property/ Real Estate Law</li>
<li>Wills Trusts and Administration of Estates</li>
<li>Buying Property in France</li>
<li>Employment Law</li>
<li>Family Law </li>
</ul>
<p>Please click on the links opposite for more details on the specific areas and our link below for details of our disclaimer.</p>
<!-- InstanceEndEditable --></div>
<div id="leftnavdiv">
<div id="leftnavouterdiv">
<div id="leftnavinnerdiv">
<p><b>Practice Areas</b><br />
Corporate/Commercial<br />
<a href="pages/corporate.html">Corporate</a><br />
<a href="pages/regandcom.html">Regulatory and Commercial</a><br />
<a href="pages/communicationsandutilities.html">Communications and Utilities</a><br />
<a href="pages/informationtech.html">Information Technology</a><br />
<a href="pages/technology.html">Technology and Electronics</a><br />
<a href="pages/ecommerce.html">e-Commerce</a><br />
<a href="pages/financialservices.html">Financial Services</a></p>
<p>
<b>Litigation</b><br />
<a href="pages/banking.html">Banking</a><br />
<a href="pages/insolvency.html">Insolvency, Bankruptcy and Corporate<br />
Recovery</a><br />
<a href="pages/commerciallitigation.html">Commercial Litigation, Arbitration<br />
and ADR</a><br />
<a href="pages/personallitigation.html">General Personal Litigation</a></p>
<p><b>Property and Private Client</b><br />
<a href="pages/residentialproperty.html">Residential Property/ Real Estate</a><br />
<a href="pages/commercialproperty.html">Commercial Property/ Real Estate</a><br />
<a href="pages/willsandtrusts.html">Wills Trusts and Administration<br />
of Estates</a><br />
<a href="pages/frenchproperty.html">Buying Property in France</a></p>
<p> <a href="pages/employment.html">Employment Law</a></p>
<p><a href="pages/familylaw.html">Family Law</a> </p>
</div>
</div>
<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>
<form action="http://search.atomz.com/search/" method="get" target="main">
<b>Search the Site<br />
</b>
<input name="sp-q" size="15" />
<input name="submit" type="submit" value="Go" />
<input name="sp-a" type="hidden" value="sp10023119" />
<input name="sp-f" type="hidden" value="ISO-8859-1" />
</form>
</div>
</div>
</div>
<div id="topnavdiv">
<ul>
<li><a href="/" id="buttonhome"><b>Home</b></a></li>
<li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>
<li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>
<li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>
<li><a href="news.html" id="buttonnews"><b>News</b></a></li>
<li><a href="people.html" id="buttonpeople"><b>People</b></a></li>
<li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>
</ul>
</div>
Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
What I'm trying to do here is have an image as a background aligned to the very bottom. I have it in it's own div, and I could get the div to align to the bottom, that's no problem. However, my problem occurs on lower resolution, and the div that has the background "overlaps" the rest of the content. Not good. Is there anyway I can align a div to the BOTTOM without overlapping any content? There are no left or right floats, the layout is pretty much centered. Here's my footer code PHP Code: div.footer { margin: 0px auto; width: 100%; height: 400px; overflow: hidden; padding: 0px 0px 0px 0px; background-image: url("../images/golf_bottom.jpg"); background-position: center; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; } I seen on other webpages that they applied a background through the body tag and aligned it to the bottom, but I already have a background reserved for that. i have this table: Code: <table width="200" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-image: url('help_tl.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
<td style="background-image: url('help_top.gif'); background-repeat: repeat-x; background-position: bottom;" width="180" height="25" colspan="3"><img src="./help_pointer_tl.gif" height="25" width="15" alt="..."/></td>
<td style="background-image: url('help_tr.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
</tr>
<tr>
<td style="background-image: url('help_left.gif'); background-repeat: repeat-y;" width="10"></td>
<td style="vertical-align: top; background-color: #FFFFE1;" width="20"><img src="./help_icon.gif" height="20" width="20" alt="..."/></td>
<td style="background-color: #FFFFE1; font-weight: bold; font-family: arial; font-size: 12px; vertical-align: middle;"> Login Help</td>
<td style="vertical-align: top; background-color: transparent; text-align: center;" width="20"><img name="close" id="close" src="./close_norm.gif" height="18" width="18" alt="Close this Window"/></td>
<td style="background-image: url('help_right.gif'); background-repeat: repeat-y;" width="10"></td>
</tr>
<tr>
<td valign="bottom" style="background-image: url('help_bl.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
<td valign="bottom" style="background-image: url('help_bottom.gif'); background-repeat: repeat-x; background-position: bottom;" height="10" colspan="3" width="180"></td>
<td valign="bottom" style="background-image: url('help_br.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
</tr>
</table>
but the image called 'close' should be right aligned in the cell, but i cant seem to get it to do so. am i missing something simple? Hi, I'll apologize up front, I'm a real newbie with css, I have a very limited understanding of it. I'm having a problem with the position of a Div tag. It work fine in Firefox mac/pc but in I.E 6 & 7 the Div's rule for margin-left seem to be ignored. Here's a link the html page: http://www.visualstrategies.ca/jf_mackie/about_us.html. The submenu container div should have a margin-left:12px; but it is igored???? Here's the div structu Code:
<div id="submenu">
<div id="submenu_container">
<div id="submenu_arrow"></div>
<ul id="nav">
<li id="current"><span>Our Investment Philosophy</span></li>
<li id="dash"></li>
<li><a href="#">Our Team</a></li>
<li id="dash"></li>
<li><a href="#">Our Services</a></li>
</ul>
</div>
</div>
Here's the css for the div's: Code: submenu{
height: 41px;
background-image: url(images/content_bg.gif);
background-repeat: repeat-y;
/*border: thin solid red;*/
}
#submenu_container{
margin-left:12px;
margin-right:20px;
height: 41px;
background-image: url(images/sub_bg.gif);
background-repeat: repeat-x;
/*border: thin solid green;*/
}
#submenu_arrow{
float:left;
margin:0 4px 0 45px;
height: 41px;
background-image: url(images/sub_arrow.gif);
background-repeat: no-repeat;
width: 14px;
/*border: thin solid blue;*/
}
Any help would be great! Thanks sskully I'm trying to get a box to position properly. If you go to this page in firefox, it looks fine, but in IE7 and IE6 the centered image is nudged to the left by one pixel. You can see the white space to the right of the banner. When resizing the IE6/7 window, it sometimes jumps back to the right and into its proper position. Are there any specific methods in CSS that I should use for positioning this? Right now I'm just using this: Code: <div align="center"> <img src="banner.jpg"> </div> The CSS is validated. -The problem only occurs in the 1280x1024 resolution and above. Not in 768 by 1024. I'm sorry but this bothers me! - Thank you. I am currently puzzled about a weird problem I've been having with the positioning of my main content div, and all it contains. I don't seem to be having any issue regarding width, just height, which makes me wonder whether it is some sort of issue with the z index property or something. It's probably much simpler :P Here's a couple of screenshots of what I'm talking about: EDIT... Not allowed to post url's.. real helpful, thanks :P Originally the site displayed just fine in IE 7.0, but then I had to set the padding on the top of the content div to 12% (the content frame contains everything below the "navbar") so that the content div displayed the information in the correct place. EDIT... Not allowed to post url's.. real helpful, thanks :P Here you can see it all looking fine and dandy in FF 2.0, but previous to changing the padding for the content div to 12% the text in the content frame and the images were much higher up on the screen. It's like the content div was ignoring the fact that there are a few other divs above it in the flow of the document. Essentially the menubar div contains the little lightening image (in its own div), some text (in its own div) and the navbar div. So I can't figure out why FF seems to act as if they are not there Any idea's? If it will help I'll be happy to show my shockingly messy code (which I'll try and tidy up first). As I am not allowed to post url's, I'll try to pop in a link of the website I am talking about: irrevocableguild dot co dot uk Cheeky of me I know... but I can see no other way of properly describing what I mean Any help would be much appreciated. Thanks ~blueseay Hi guys, You've been very helpful so far so I am hoping you can help again! I am in the middle of building another website, and it displays perfectly in Chrome/Firefox/Opera but as usual, there are problems with the positioning in IE. Please can you take a look at the CSS and let me know what the problem is and how to fix it? www-dot-vwcampervanforsale-dot-co.uk Thanks very much for your time and consideration, much appreciated im building a simple catalogue for my website and in my content area im having problems getting the look i want: but im having the image section not go down to the bottom of the container div, making text go directly underneath the image. Code: <html> <head> </head> <body> <div> <div style='float:left;border:1px solid #000000;'> image </div> <div style='border:1px solid #000000;'> title<br/><br/> description </div> </div> </body> </html> this is very frustrating as i know i could do this easily with tables :/. There must be some property i can set to stop this from happening? |
|||||||