|
CSS - Divs Bleeding Together /h2's Not Aligning In Ff
I camped out this weekend and worked all day and night to build one of the more advanced forms that I need. I am really pleased with the results so far, at least in IE. It is not perfect. I am having some problems with how it looks in FireFox.
It looks great in IE. However, in Firefox, you can see the sections are bleeding together. Each is in it's own DIV set as BLOCK. The sections are Core Details Features Description Contact/Shipping/Payment Promotion Brief example <div> <h2>Core</h2> content bla bla bla </div> <div> <h2>Details</h2> content bla bla bla </div> The H2 headers, the text is bleeding into the div of the section before it. In IE, it doesn't. in FF, it's all jumbled up. Here's a link to an .html file of the form. It should open up in any browser since it references CSS by url and graphics by url. Can anybody check and see if it is a quick fix? I'm not sure what the problem is. I don't have any extra cash at the moment so I'm stuck. I've been trying to figure out the problem all weekend to no avail. http://quotes.cybercon.net/classifiedsform.html Also, here are two pics. Screenshots from IE and FF. In the IE screenshot, you can see how I outlined each section. The H2 headline tag (core/details/description/feature) is bleeding into the previous section. http://quotes.cybercon.net/classifiedformIE.jpg http://quotes.cybercon.net/classifiedformFF.jpg Thanks! -Jason Similar TutorialsI have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line. gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left. Hi guys, I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen. Something like this URL http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg I have written the following test and the forms are placed correctly inside the left and right divs. Code:
<HTML>
<Head>
<style type="text/css">
div.wrapper {
position: relative;
clear: both;
width: 100%;
border : 1px solid #000000;
}
div.left {
float: left;
width: 50%;
background: #ffffff;
border : 1px solid #000006;
}
div.right {
float: right;
width: 50%;
background: #ffffff;
border : 1px solid #000001;
}
</style>
</Head>
<Body>
<div class="wrapper">Wrapper
<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
</div>
</Body>
</HTML>
A couple of problems with the above. 1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy. 2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above) Thanks I am trying to get these 2 divs, which are going to be acting as a "tab" off of the main layout of the page. The first one for Personal is working and displaying correctly as far as I can tell, but something is wrong with my Business one. It doesn't seem to be taking any of my styles for displaying that tab correctly, either that or the position is totally off. If anyone could help me out I'd greatly appreciate it. Here's the css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff;
}
#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
background: #ededed;
}
#accountselector-home {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: #ffffff;
}
#acccountselector-business {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: url("accountselectorleft.png");
}
#headerwrapper {
position: relative;
margin-top: 5px;
width: 100%;
height: 300px;
}
#headerwrapper-left {
position: relative;
float: left;
min-width: 64%;
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: #ffffff;
}
#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 25px;
width: 100%;
line-height: 25px;
}
#headerwrapper-left-banner {
position: relative;
height: 200px;
width: 100%;
border: thin solid #939393;
}
#headerwrapper-spacer {
width: 12px;
height: 100%;
float: left;
background: #ffffff;
}
#headerwrapper-right {
position: relative;
float: left;
width: 33%;
height: 100%;
border: thin solid #939393;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
line-height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
float: left;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
float: left;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
And the html: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id="accountselector-wrapper"> <div id= "accountselector-home">Personal</div> <div id= "accountselector-business">Business</div> </div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id= "headerwrapper-spacer"> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage My Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Thanks I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php I'm trying to recreate a header that was built using tables. Here is an example of the original header. This is how I want it to look using div. http://65.175.116.253/logo/html_head_p1.html Here is the code for the table based header Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <img src="http://65.175.116.253/logo/banner.jpg"> </td> </tr> </table> </body> </html> Here is the header using the code with DIVs. http://65.175.116.253/logo/styletest.html Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px;
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#headerbanner {
background: #004C91;
position: absolute;
width: 600px;
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">
</body>
</html>
My site lines up fine on Firefox. However, when it loads on IE, my right most part of the page does not align properly. You can see my problem at dicebaseballdotorg. Any ideas or suggestions? I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two.... However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated. Oh, I know my code could be a bit more clean, this is just a comp. I've also tested this on FF so far. I doubt IE will return favourable results either. My example: www.efacln.com/Untitled-1.html My CSS code: Code:
#container
{
MARGIN: 5px;
}
#header_container
{
border-color: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-LEFT: none;
BORDER-RIGHT: none;
WIDTH: 100%;
}
#header_content
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-TOP: none;
BORDER-BOTTOM: none;
WIDTH: 600px;
HEIGHT: 100px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
}
#kirk_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
WIDTH: 550px;
HEIGHT: 100px;
FLOAT: left;
POSITION: absolute;
MARGIN-TOP: 5px;
MARGIN-RIGHT: 2.5px;
}
#navigationblock
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: THIN;
WIDTH: 410px;
POSITION: relative;
FLOAT: RIGHt;
MARGIN-TOP: 5px;
MARGIN-LEFT: 2.5px;
}
#scott_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
width: 410PX;
MARGIN-TOP: 1 px;
MARGIN-TOP: 5px;
}
</STYLE>
Hang on to this post, I have found a couple of answers, so will post again when i get stuck! Charlie Hi All Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE: http://www.flatsinbraunton.co.uk/ce/ 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>Colin Essery Carpets</title>
<style type="text/css">
html {
font-family:Helvetica,Arial,sans-serif;
}
body {
font-family:Helvetica,Arial,sans-serif;
text-align: center;
background-image:url(images/bg-body.jpg);
background-repeat:repeat-x;
}
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
#logo {
position:absolute;
left:0px;
top:78px;
width:327px;
height:102px;
}
#headstrap {
position:absolute;
left:327px;
top:78px;
width:473px;
height:102px;
}
img {
border-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
</div>
<div id="headstrap">
<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
</div>
</div><!--END CONTAINER DIV -->
</body>
</html>
Any help welcome thanks Rich Hello, I have [almost] successfully added CSS tooltips to a conference agenda and have an issue where links are "bleeding" through the tooltips. I think it has something to do with the way the links and tooltips are positioned. For example, I have a table cell with 2 links in it like this: <p><a link>Link1<span>Tooltip1</span></a></p> <p><a link>Link2</a><span>Tooltip2</span></p> The spans are hidden until hovered over, using a display:none to display:block switch. The links are positioned relative and the blocks are positioned absolute. The behavior I'm seeing is that Link2 will "bleed" through the tooltip block, obscuring the text in the block. I've tried a couple of other positioning strategies and using z-index with no improvement. Can someone have a look and see if you can help? Visit http://www.tipsweb.com/about/events/conference2007/agenda_new.asp And mouse over the Brazos 2 session links from 1:00 pm - 2:30 pm on Tuesday April 17th. Thanks! Chris Hi all, the page i am talking about is... http://sydneynightowl.com.au/home.php The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds. The div and header should be starting after the first 3 divs (which are set to float) I hope i have explain this correctly, any help is apriciated. The css code is Code: @charset "utf-8";
/* CSS Document */
body {background-color:#000000;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center top;
color:#FFFFFF;
font-family:"Lucida Sans Unicode", sans-serif;
font-weight:100;
font-size:12px;}
#container {
position:absolute;
width: 700px;
left:50%;
margin-left:-358px;
}
#header {
margin-top:0px;
height: 115px;}
#toolbar {height: 30px;
line-height:10px;
padding: 0px 10px;
font-variant:small-caps;
}
#cornerlogo {
position:fixed;
top:5px;
left:5px;
}
#topnavigation {height: 35px;
line-height:35px;
text-align:center;}
#content { border-bottom:1px;}
.3column {width:695px;
padding-right:5px;
padding-left:5px;
margin-top:5px;}
#leftcolumngl {float:left;
width:223px;
height:370px;
padding-right:5px;
padding-left:5px;
padding-top:5px;
margin-top:15px;
margin-right:5px;
border:#FFFF00 solid thin;}
#middlecolumngl {float:left;
height:370px;
width:225px;}
#rightcolumngl {float:left;
height:370px;
width:230px;
padding-left:5px;}
#leftcolumn { float:left;
width:230px;
padding-right:5px;}
#middlecolumn {float:left;
width:230px;}
#rightcolumn {float:left;
width:230px;
padding-left:5px;}
#imagecolumn {float:left;
width:340px;
padding-left:5px;}
#infocolumn {float:left;
width:340px;
padding-left:5px;}
#footer {height: 30px;
border:thin solid #FFFFFF;
clear:both;
text-align:center;
margin-bottom:30px;
margin-top: 30px;
line-height:25px;}
#bgfirst {
position:absolute;
top:190px;
left:0px;
width:90%;
height:200px;
margin-bottom:20px;
background-color:#00CC00;
}
#bgsecond {position:absolute;
top: 400px;
right:0px;
width:90%;
height:200px;
background-color:#660066;
}
a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}
a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}
a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}
h1 { text-align:center;
color:#000000;
background-color:#fffc00;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:22px;}
h2 {text-align:center;
color:#fffc00;
background-color:#333333;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:18px;}
.ourprice {
display:inline;
color:#FF0000;
line-height:20px;
font-variant:small-caps;
font-size:14px;}
img {
border-color:#fffc00;
border-style:solid;
border-width:thin;
}
img.noborder { border:none;}
img.venues {float:left;
margin:10px;}
.mainnavimages {
border-color:#979700;
border-style:solid;
border-width:thin;
}
p {line-height:15px;}
strong { color:#fffc00;}
Well here is my problem... I'm trying to do a fluid design with complete css. All is fine, however when I view my page I can't get the content to fill an entire area. I tried to use a width:100% but that stretches it way too much and it goes over the container div. What I want is for it to go the container div but not over, is there any way I can do this with the current layout? I would post the code but tis a lil big so would be easier to just direct you to my site. I have tried many different thing but to no avail. Any help would be greatly appreciated. TiA -BoNfiRe Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css |
|||||||