|
CSS - Css Float Ie6 Overflow Issue
Heys,
I have the following code: <html> <head></head> <body> <div style="width: 100px; height: 100px; border: 1px solid red;"> <div style="width: 200px; border: 1px solid green; float: left;">-</div> </div> </body> </html> In FF and IE7 it works the way I'm desiring; specifically, the child div (width: 200px is contained inside a box, however it breaks outside of it due to the width. ||||||||| ||||||||| |||||||||||| |||||||||||| ||||||||| ||||||||| That's how it should look; but I can't replicate it in IE6. Any ideas? Thanks Similar TutorialsHey all, up until recently I have used the various styles and hacks using :after or clear:both; to rectify and force divs to clear. However knowing that these methods won't validate and aren't strictly proper, I've decided to ditch all those methods and try to sort floated divs out correctly. Here is the culprit; Code: <div style="height:144px; margin-bottom:10px;"> <div style="height:110px; padding:0px 0px 5px 0px;"> <div style="width:80px; height:110px; float:left;"> <div><!-- DYNAMIC IMAGE --></div> </div> <div style="width:655px; height:110px; float:left;"> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC DESCRIPTION --></div> </div> </div> <div style="height:29px; background-color:#D8D8D8;"> <div style="padding:7px 0px 0px 10px; margin:0px 5px 0px 0px; float:left;"><!-- DYNAMIC TEXT --></div> <div style="padding:7px 0px 0px 10px; float:left;"><!-- DYNAMIC TEXT --></div> <div style="padding:3px; float:right;"><!-- DYNAMIC TEXT --></div> </div> </div> The problem is with the contents of <!-- DYNAMIC DESCRIPTION -->. This is user entered through a HTML editor in their admin console. This can have line breaks etc. and therein is where my problem lies. I have restricted the showing of the "Description" text to 175 chars. Meaning, and providing the user enters more than 175 chars before a line break, it would rarely go on to a new line when displayed in the above page. However if a user added multiple line breaks the content would still display overlaying the bottom, and final div. Now I understand I could remove line breaks etc before rendering, but I would like not to have to do that, I would rather the "Description" div stretch to accomodate the text however it presents itself than run the risk of one day having "leaking" overlaying content. I tried the width:100%; overflow:auto; but this results in scrollbars. I don't want to use hidden either because again it rendered badly. I've also used clear:both; on the final div with no joy. Is there anything that can be done? I'm sure there is, maybe I just can't see the wood for the trees at the moment. Any suggestions would be hugely appreciated. Thanks in advance. Hi, I am trying to display an image (in its own div) which extends past the height of the container div it is in. The problem is that in FF it chops off the piece of the image (as overflow is hidden??) that extends below the container div, it doesn't in any version of IE. However, if I don't set overflow to hidden, in IE6, the portion of the image that extends also makes the container divs background color display below the height I have set for it... Hope you get what I mean Anyway, here is the code Code:
<div id="banner-container">
<div id="banner">
<div id="banner-txt">
<img src="images/banner-txt.png" />
<p>
Lorem ipsum...</p>
</div><!-- banner txt -->
<div id="banner-img">
<img src="images/banner-img1.png" alt="the image" />
</div><!-- banner img -->
</div><!--banner-->
</div><!-- banner container -->
And the css Code:
#banner-container{width:100%; height:314px; margin:0 auto; padding:0; background-color:#212582; overflow:hidden;}
#banner{width:920px; height:314px; margin:0 auto; padding:0; background-image:url(../images/banner-bg.jpg); background-repeat: repeat-x; }
#banner-txt{width:519px; height:280px; float:left;}
#banner-img{width:340px; height:314px; position:relative; padding-top:10px; float:right;}
Does anyone have any ideas on how I can get it to stop chopping off the end of the image in FF?? Thanks... EDIT: Some screens... Firefox Internet Explorer I have an annoying problem that causes my css boxes to overflow in IE. You can see the problem here URL The CSS for these boxes is as follows Code:
.rbroundbox { background: url(images/postbackground.gif) repeat; }
.rbtop div { background: url(images/topleft.gif) no-repeat top left; }
.rbtop { background: url(images/topright.gif) no-repeat top right; }
.rbbot div { background: url(images/bottomleft.gif) no-repeat bottom left; }
.rbbot { background: url(images/bottomright.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 60%; margin: 1em auto; }
The HTML is Code:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<b>[INSERT TITLE]</b>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
[INSERT NEWS]
</td>
</tr>
</table>
<p><font face="Tahoma" size="2">Posted by <a href="mailto:[INSERT EMAIL]">[INSERT REALNAME]</a> at [INSERT DATE]</font></p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
What is causing the overflow in IE? it doesnt show up in any other browser I know of. tinyurl(dotcom)/6dw6jp4 Hi everyone I am a newbie here, Please have a look at the above link. The second box which has the therapist images and their names do not appear correctly on IE8. On all other browsers it seems to work fine. Can any one please have a look at the page and let me know a solutions. Thanks a lot. The site I am working now has a discussion group. Sometimes someone will post a pic and the thread will break the 955px boundary of the wrapper. In Firefox, what happens is the thread will leave the wrapper. In IE, the thread makes the wrapper expand. In an ideal world I'd have all images resized or not even limit myself to a 955px width, but this won't work with this site... I'd like to know if it is possible to make the thread div leave the wrapper in tact at 955px like it does in Firefox. Thanks in advance :} Please look at this page - Example Page On the above page you will see a link that reads "Click Here" Doing so opens a lightbox. In Chrome & FF their is a small "X" graphic appearing in the top right corner to close the lightbox, but that same graphic does not appear in IE for some reason. Can someone shed some light as to why? Tom Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> I have a section of 3 divs, 1 floated to the left, one to the right and one in the middle. IE 7 & Firefox are fine however in IE 6 it seems to display the left and right columns as a block pushing the middle column down to the bottom. see screenshot, the image is the middle div while the white side parts are the left and right columns. My code is as follows: CSS Code: Original - CSS Code #headerLeft { float: left; background-image: url('/media/images/040708_05.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #headerRight { float: right; background-image: url('/media/images/040708_07.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #flashMovie { background-color: #FFFFFF; margin-left: 20px; margin-right: 20px; width: 730px; }
Hi Guys, Ive got a serious'ish error on a site im responsible for and with it being the period between christmas and new years I cant find anyone to help me. So im coming asking for help with an IE6 error which is occuring on http://social.eyeforpharma.com/ It appears fine in every browser apart from IE6. IE7, FF, Safari etc work fine. With no decent debug tools for IE6 available im stuck. Help REALLY appreciated. Kevin. Edit - The error gets worse when you go to view an article. Hatchetradio.com/radio/ if you check this page it's fine in firefox if you check this page in I.E. the tab on the left hand side actually sits on top of the layout. I'm trying to get it to fit snug. I'm not sure why this is happening. hatchetradio.com/radio/wp-content/themes/reborn/style.css that's the css im using Having one last problem before the site goes beta live... I have rounded divs, and inside is a floated left menu element. If something in the menu expands the round corners pop out of place rather then shift down. Im not sure what to chage. The site is: adventurevalley.ca/jason/programs/prgSwim.cfm If you mouse over the birthday parties link you will see what I mean (IE7 issue). Thanks a mill! hello. i am making a small, rough bar graph on the left side of my page. when i try it, the bar ends up going to a new line. what i'd like to do is have a colored div fill up 80% or 100% of the rest of the space to the right of the key. here is the code: Code:
<div class="bar_graph">
<div class="key">signed: 8,000</div>
<div class="bar signed" style="width: 80%"> </div>
</div>
...
.signatures {
margin-top: 20px;
}
.signatures .bar_graph {
overflow: auto;
margin-top: 2px;
}
.signatures .key {
float: left;
font-size: 8px;
text-align: right;
width: 40px;
}
.signatures .bar {
float: left;
height: 17px;
}
.signatures .signed {
background: #f3b400;
}
.signatures .goal {
width: 100%;
background: #e58728;
}
heys all, im having an issue with text that is variable length. i want to float something in the bottom right corner of some text. that something which is floated should have a width of 100px and height of 100px. so for example text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE now the sample text above can be 1 line, or 100 lines. anyone have any ideas? i've been hammering away at this too long Thanks. Hello i would like to know if there is any hacks or tips to resolve problem in IE6's rendering of Floated Boxes? It seems IE6 add extra padding or margin to some floated element, specially those near the borders of container... How do i get around this? This page works fine in Firefox, but in IE, the float makes the content move off the page to the left. I figured out that without a background-color applied to the .textBox style (which is the DIV that contains the text and image I am floating) it works. However, I really would like the .textBox to have a background color. Anybody knows what to do? Here is the page: http://www.jbbdesign.com/wip/index4.html many thanks, Julia Ok, I have been pulling my hair out trying to figure out a workaround. I then have been searching the web for answers, but can't get any of the solutions to work in this case. Here is a stripped down version of the code: CSS: Code: ul {
list-style: none;
}
li.leftform {
clear: left;
float: left;
text-align: right;
width: 121px;
padding-right: 10px;
font-size: 12px;
font-family: Tahoma;
color: #000000;
line-height: 40px;
}
li input {
width: 243px;
height: 18px;
line-height: 18px;
margin: 0;
margin-right: 3px;
}
li.middleform {
float: left;
width: 243px;
padding:8px 0;
padding-right: 10px;
line-height: 18px;
min-height: 24px;
}
li.rightform {
float: right;
width: 168px;
padding-top: 10px;
padding-right: 25px;
line-height: 11px;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>IE Test</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <fieldset> <legend>Personal Information</legend> <ul> <li class="leftform"> <label for="FirstName">* First Name</label> </li> <li class="middleform"> <input name="FirstName" type="text" maxlength="20" id="FirstName" /> </li> <li class="leftform"> <label for="LastName">* Last Name</label> </li> <li class="middleform"> <input name="LastName" type="text" maxlength="30" id="LastName" /> </li> <li class="leftform"> <label for="Phone">Phone Number</label> </li> <li class="middleform"> <input name="Phone" type="text" maxlength="30" id="Phone" /> </li> <li class="rightform"> Saving a phone number helps us contact you if there's a problem. </li> <li class="leftform"> </li> <li class="middleform"> <a href="">Add a phone number</a> </li> <li class="rightform"> <a href="">Cancel</a> | <a href="">Save</a> </li> </ul> </fieldset> </body> </html> It displays fine in IE8, Firefox 2+, Safari, Google Chrome, Opera... the problem, as usual is IE6 and IE7. For some reason the clear: left works on the first element, but an element after goes as if there was never a clear before it. The HTML is like this for a reason, I know you can't see it now because I stripped everything out of it. Any help on a quick fix (don't mind if it's dirty ) Thanks! Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. Hey all, I am just starting to develop a new site for my web design company, though i'm doing it in mac os x env using camino, so to my horror, when i finally got around to checking it in IE, I discovered that everything was horribly wrong. All of the div's that were supposed to be floated left are now overlapping the right float. I've read a few articles which all suggest different things, i.e. putting 'display: inline' in all the float styles. That didn't work. I don't have the time to figure it all out though I'm sure it's a simpleish solution. I'd really appreciate the help. Pete In this header www.johnschureman.com I have an image, an h1 and a subtitle div. Code: <div id="header">
<img src="../images/jschu-crop150h.jpg">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1>
<div id="subtitle">
<!-- Here's the tagline -->
<?php bloginfo('description'); ?>
</div>
</div>
I cannot figure out in my css how to make the subtitle appear below the h1. Code: #header {
margin:0;
padding:0;
height:170px;
padding: 0px;
margin-top: 3px;
/* padding-top:110px;
padding-bottom:10px;
padding-right:20px;
padding-left:5px;*/
border-bottom: 1px solid #bab1b1;
background: #404040;
}
#header img {
float:left;
display:inline;
margin: 0 auto;
padding: 10px 10px;
border:none;
}
#header h1{
display: inline;
float:right;
padding:0px;
margin: 0px;
padding-top:100px;
margin-bottom:3px;
margin-right: 5px;
font-size: 2.4em;
letter-spacing:0.1em;
}
#subtitle {
text-align:right;
font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
margin-bottom:3px;
margin-right: 5px;
font-size: 0.9em;
text-transform:uppercase;
color:#bbb;
}
Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance. - Willi |
|||||||