|
CSS - Problems With Getting Float Right
Hey.
On my page I've got smaller "post" div's I put my content in, and those are inside a "mainContent" div again. They have fixed width and I can get two of them beside each other, which works fine with float:left - but if I have two posts with variable height, then the next post on the page will be below the highest one. I uploaded an example at http://www.zaklaberg.tk. I was wondering how I can make it so my post elements stack properly on top of each other? My css-rule for the post div tags looks like this: Code: .post {
padding: 5px;
height: auto;
width: 330px;
margin-bottom: 50px;
margin-left: 30px;
background-color: #CCE3C1;
float: left;
}
The rest of my css is at http://home.online.no/~ste-labe/_css/main.css. Thanks in advance for any help! Similar TutorialsHello everyone!! Great community you have going here! I am working on a personal project, and try to do all the work myself (hired a designer at one point but the best he could do is a table based layout ) The site is based on the drupal CMS and the zen theme. And currently the them has problems when rendered in IE7 everything is getting jammed in the top left corner in IE7 and IE8 compat mode: drupal.org/files/issues/IE8_compat.GIF some people tried to combat this issue by adding this to the IE specific stylesheet: CSS Code: Original - CSS Code #header, #main {overflow: hidden;} #header, but it does not solve the problem 100% drupal.org/files/issues/IE7vsIE8_overflow_hidden.GIF I've been searching for a fix for some time but with no luck, so if you people have any suggestions I would be super appreciative! The live site could be viewed he techbine.nfshost.com P.S. to see the images copy/paste the links to the address bar (I have a low post count so can't link directly ) Hey everyone, Just released v2 of my design site - but there's a problem with the floated sidebar in IE6. http://www.quiviramedia.com/ is the site. http://www.quiviramedia.com/style.css is the CSS URL. What is the problem? Does anybody know? Thank you! Here's the link of the messy page: http://205.205.200.231/~h806209/indexmess.php I need someone to tell me why the float left/right isn't aligning properly. I posted the link above. Here's an example that works: http://205.205.200.231/~h806209/positioning.php and http://205.205.200.231/~h806209/positioning1.php One's in a style tags the other's inline. But when I insert my codes it shows things messed up. Hey. First post on here, so hopefully you lot are very helpful I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations. The URL for the website is: (URL address blocked: See forum rules) The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container. Meaning that, the footer rides up to the middle of the page, as shown: [IMG](URL address blocked: See forum rules)[/IMG] Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them. Thanks very much! Nick. Hello. I am trying to solve a float problem. The crux: One wrapper div around a left (floated) column and right column. Content in the left is fine: In the right column I need the image (#logo) to be on the left of a h2 (#name). The #logo is taller than #name. Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name. Please look at my code and diagram of how it should look in my attachment. Thanks Hey guys, I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license. I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it). Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try. I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me. If anyone of you can help me out it would be much appreciated!!! Thanks, alex Here is the site with the code. 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" lang="en"> <head> <title>LWIS.NET Celebrity Drop-Down Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" /> <meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Beginning of compulsory code below --> <link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <!-- / END --> </head> <body> <!-- Beginning of compulsory code below --> <ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> <li><a href="./">resume</a></li> <li><a href="./">about</a></li> <li class="dir">work <ul> <li class="dir">Reel <ul> <li><a href="./">Montage Reel</a></li> <li><a href="./">Director's Reel <br>(selected scenes)</a></li> </ul> </li> <li class="dir">Narrative <ul> <li><a href="./">The Liberation of the Fish</a></li> <li><a href="./">Behind the Scene</a></li> <li><a href="./">All that Remains</a></li> <li><a href="./">Jumper</a></li> <li><a href="./">Dragoste</a></li> </ul> </li> <li class="dir">Music Video <ul> <li><a href="./">MOBY music video competition</a></li> </ul> </li> <li class="dir">Commercial <ul> <li><a href="./">FIFA spec commercial</a></li> </ul> </li> </ul> </li> </ul> <!-- / END --> </body> </html> And here is the default css which I have tried playing with to no success. Code: @charset "UTF-8";
/**
* LWIS Celebrity CSS Drop-Down Menu Theme
*
* @file default.css
* @name Default
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera9+, Firefox2+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2009 Live Web Institute. All Rights Reserved.
*
*/
/*-------------------------------------------------/
* @section Base Drop-Down Styling
*/
ul.dropdown {
font: 20px/normal Helvetica, Arial, sans-serif;
letter-spacing: +2px;
text-transform: lowercaseercase;
}
ul.dropdown li {
padding: 0 10px;
background-color: transparent;
color: #000;
}
ul.dropdown li.last ul li {
float: right;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #cdcdcd;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
background-color: #cdcdcd;
font-size: 12px;
letter-spacing: normal;
}
* html ul.dropdown ul {
width: 960px;
}
ul.dropdown ul li {
font-weight: bold;
}
/* -- level mark -- */
ul.dropdown ul ul {
margin-top: 5px;
text-transform: none;
}
ul.dropdown ul ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
*/
ul.dropdown *.dir {
padding-right: 30px;
background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul *.dir {
background-image: none;
}
hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code Code: <div id="greyinset"> <div id="insetcontent"> <form name="form1" method="post" action=""> <div id="insetcontentL"> <div align="left"> <label>Smoking:</label> <br> <label>Bed Type:</label> <br> <label>Accessible:</label> <br> </div> </div> <div id="insetcontentR"> <div align="left"> <input name="smoking" type="radio" value="yes"> yes <input name="smoking" type="radio" value="no" checked> no<br> <input name="radiobutton" type="radio" value="radiobutton"> King <input name="radiobutton" type="radio" value="radiobutton"> Two Beds <input name="radiobutton" type="radio" value="radiobutton"> No Preference<br> <input name="accessible" type="checkbox" id="accessible" value="yes"> </div> </div> </form> </div> </div> and the css code Code:
#greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; }
#insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;}
#insetcontentL {width: 50%; float: left;}
#insetcontentR {width: 50%; float: right;}
any ideas?? or do i have to go back to trusty tables thanks RF Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! I have an image that is float: right that I want a caption under. I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of. I want the image to float left and the caption in dk blue to be beneath it. Here is the problem page Here is the css code for the float part: Code: .imgRight {
clear: none;
float: right;
min-width: 100px;
color: #3399FF;
font-weight: bold;
}
.imgRight img {
margin: 0px 0px 10px 20px;
border: 1px solid #000099;
overflow: visible;
}
Here is the xhtml code for the float part: Code: <p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory
diagnostic and therapeutic products started in 1951. </p>
<div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" />
1966 Vitalograph P Model Spirometer</div>
<p>Vitalograph achieved its early success
by taking spirometry from a complex laboratory test to a simple effective screening procedure
- with the key benefit of providing early detection, and therefore more effective treatment.</p>
http://wrath.wr.funpic.org Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why? When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up. Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE. Thanks a lot. Here is the industry news page I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture. xhtml: Code:
<div id="industry">
<h1>Industry News and Information</h1>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span>
<h2>Winter ARTP meeting well attended</h2>
<p>Vitalograph recently attended the Association for Respiratory Technology
and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole
Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More
...</a></p>
</div>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="rowLast">
<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span>
<h2>Vitalograph participates World COPD Day</h2>
<p>To mark World COPD Day on 16 November 2005, the British Lung Foundation
teamed up with Superdrug to offer a free spirometry test at selected
stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More
...</a></p>
</div>
<p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
</div>
css: Code:
.imgLeft img {
clear: none;
float: left;
margin: 0px 20px 10px 0px;
border: 1px solid #000099;
}
.imgRight img {
clear: none;
float: right;
margin: 0px 10px 10px 20px;
border: 1px solid #000099;
}
/*rows*/
.row {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #3399FF;
}
.rowLast {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #3399FF;
border-bottom: 1px solid #3399FF;
}
.line {
border-bottom: 1px solid #3399FF;
padding-top: 0px;
padding-bottom: 10px;
}
.inline {
display: inline;
}
#mainColumn {
padding: 0px;
margin-left: 175px;
background-color: #FFFFFF;
height: 100%;
}
/*industry news*/
#industry {
padding-right: 20px;
padding-left: 20px;
}
#industry h1 {
margin-bottom: 20px;
}
#industry h2 {
color: #000099;
margin: 0px 0px 10px 0px;
}
#industry img {
margin-bottom: 10px;
}
.copdDay img {
clear: both;
margin: 0px 40px 15px 55px;
border: 1px solid #000099;
}
.artp {
margin: 0px 40px 15px 40px;
}
.artp img {
clear: both;
margin: 0px 40px 15px 25px;
border: 1px solid #000099;
}
Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance. Thanks! The underline is on the contact page (the google map has been freaking out on IE, so try FF). I want "Hours" to be underlined, but it isn't showing up. It's an h1 with a class of "comment" and the CSS is Code: h1.comment {
text-decoration: underline;
}
The float problem uses this CSS. The page in question shows all the previous presidents . There's a 0 margin and it does float, it just is aligned wrong. The CSS for both columns is Code: #pastpres table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
margin-right: 0;
}
#pastpres tr {
border-bottom: 1px solid #775b36;
}
#pastpres2 table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
float: right;
margin-top: 0;
margin-left:0;
}
#pastpres2 tr {
border-bottom: 1px solid #775b36;
}
Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. my layout is a left border, main content, then right border, all vertical columns. here is their code: Code:
.left {
background-image: url('images/obj_left.gif');
background-repeat:repeat-y;
width:28px;
margin:0px;
}
.maintable {
width: 100%;
background-color:#FFFFFF;
border-left:3px solid black;
border-right:3px solid black;
}
.right {
background-image: url('images/obj_right.gif');
background-repeat:repeat-y;
width:28px;
margin:0px;
}
i also float them left, so imagine that is there. so i have code like this <div class='left floatleft'></div> <div class='maintable floatleft'></div> <div class='right floatleft'></div> but why cant i see the images in right and left? Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. |
|||||||