|
CSS - Ie 6.0/min-width Mess
haha, Web development could actually be fun if the browsers would at least adhere to the same standard!
Anyway, in my web page I have this setup going: Code: <div class="logoContainer"> <div class="indexLogo"> <img src="/templates/include/index/logoLeft.jpg"> </div> <div class="indexLogoRight"> <img src="/templates/include/index/logoRight.jpg"> </div> </div> and the CSS Looks like this: Code: .logoContainer {
position:relative;
width:100%;
min-width:866px;
height:100px;
background:url(include/index/logoFiller.jpg);
background-repeat:repeat-x;
}
.indexLogo {
float:left;
min-width:431px;
height:100px;
}
.indexLogoRight {
float:right;
min-width:384px;
height:100px;
}
This works fine in IE and safari, but in IE the right floated div drops down when the browser window is resized to a pixel size smaller than the width of the 2 images. I am forcing IE into standards comliant mode but it doesn't fix this problem. I've tried various fixes on the net and nothing seems to work. What am I doing wrong or how can this be corrected? Similar TutorialsYou can check this problem in the pink square with curvy corners that I have in the url metatradersoftware com(I cannot mention it because of forum fules). How I am supposed to show you my code if you do not know the url where it is?This post is just for asking a question. Thus, I hope there is nothing wrong with it. If you check the site with firefox, opera or safari everything will be alright, though. Do you have any idea why internet explorer 6 above all and 7 make this mess? For the time being, I still do not have any concrete idea about the reasons of this different behavior in these browsers from Microsoft. I would appreciate any suggestion. Thanks in advance Hello everybody, please excuse me as i am a begginner. I have made some changes to my CSS and everything is fine apart from one section. On my website in the "Check-out" are i should display a Paypal application and and image containing information. I can't figure out why the image and the application are half way down the page. Here is the Website. Code: http://www.Archives-music.com Here is the CSS Quote: /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} /* Joker Designs Soundclick CSS*/ .mainTable {background: transparent; color:#000000; width:893px; margin-left:auto; margin-right:auto; text-align:left; border: none} .mainContent {background: transparent; color:#color:#000000; width:893px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navbarBottom, .navbarTop {width:893px;} .navigation {background: url(); color:#000000; width:893px; height:1140px; float:left; z-index:9; overflow:hidden; margin:-5px 0px -25px 0px; } .navigation a, .navigationDivider, .navigation .headline, .navigation .div, .navigation img {display:none;} .navigation .statsNumbers {color:black; margin-left:50px;} form .mailingList {margin-left:55px; position:absolute; top:990px; z-index:3;} .mlheadline {display:none;} .mlprivacy {display:none;} .contText form {height:150px;} .contText a {border:none;} .headline {display:none;} .headlineBig {display:none;} .headlineSuppl {float:right; margin:10px 5px 0px 0px; color:#666666; font-size:0px; font-weight:normal;} .headlineSuppl a:link, .headlineSuppl a:visited {color:#929292; text-decoration:none;} .headlineSuppl a:hover {color:white; text-decoration:underline;} .pageturner {background:#000000; color:#cccccc; border:#222222 solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#929292; text-decoration:underline;} .listedPicsBox {border:#222222 solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} .color_supplemental {color:#666666;} .alternateBG0 {background:none;} .alternateBG1 {background:none;} .mainContent .contHeadline {clear:left; font-size:0px; color:#929292; padding:12px 0px 2px 20px;} .mainContent .contText {clear:left; padding-left:0px;} .mainContent .contInterview {clear:left; padding-left:0px;} .mainContent .newsBox {clear:both; background:#000000; color:#cccccc; border:#222222 solid 2px; margin:0px 20px 20px 20px; padding:20px;} .playerBox {float:left; clear:left; padding-left:20px; margin:15px 0px 3px 0px;} .playerBox .playerHead {background:; color:#000000; border-top:#000000 solid 1px; border-bottom:#000000 solid 1px; text-align:right; font-size:10px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#;000000 text-decoration:underline;} .playerBox .playerHead a:hover {color:#000000; text-decoration:underline;} .playerBox .songBox {background:#000000; border-bottom:#000000 solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:; font-size:10px; padding:1px;} .playerBox .songBox .singleSong:hover {background:; color:#000000; cursorointer;} .embeddedPlayer {font-size:12px; margin-left:130px; padding40px; position:absolute; top:620px; width:620px; z-index:3;} .contHeadline {display:none;} .pageFooter {clear:both; color:white; padding:30px 0px 10px 20px; width:800px; margin-left:auto; margin-right:auto; text-align:center;} .songsBox {border-bottom:#000000 dashed 0px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox {background: url(); background-repeat: repeat;} .songsBox a:link, .songsBox a:visited {color:#000000 ;} .songsBox a:hover {text-decoration:underline; color:#a70013;} a.songtitle:link, a.songtitle:visited {color:#a70013; text-decoration:none; font-size:13px; font-weight:bold;} a.songtitle:hover {color:#000000 ; text-decoration:underline;} .songsBox .actionlinks {font-size:11px; color:#a70013;} .songsBox .topSong {color:#a70013; float:left; text-align:left; font-size:10px;} body { background-image: url(http://www.ozphotolink.com/usr/95/sphere_black_wh); background-color: #ffffff; background-position: center center; background-repeat: ; background-attachment:fixed; } img { border: none; } body, div, tr, td, select, textarea, input, option { font-family:Verdana; font-size:10px; } a, a:link, a:visited } color:#ffffff; text-decoration:none; } a:hover { color:#a70013; text-decoration:underline; } salesection { background-color:black; } div.salesection /* I made changes to margin and positioning here.*/ { position: absolute; top: 65px; left: -140px; margin-right: 0px; margin-left: 0px; Width: 790px; heigth: 100px; } /* I added this section here.*/ a.paymentsection { position: relative; top: 0px; left: -180px; } /* I added this section here.*/ div.saleform { position: relative; top: -195px; left: 185px; } /* I added this section here.*/ div.button { position: relative; top: 15px; left: 0px; } div.main { position: absolute; top: 0; left: 50; margin-left: 10px; width: 853px; height: 1521px; margin-top:130px; } /* I made changes to margin and positioning here.*/ div.paypal { position: absolute; top: 10; left: 230px; margin-left: 0px; width: 210px; height: 100px; margin-top:1140px; z-index:7; } div.paypal1 { position: absolute; top: 0; left: 50; margin-left: 330px; width: 255px; height: 100px; margin-top:1140px; z-index:7; } div.paypal2 { position: absolute; top: 0; left: 50; margin-left: 600px; width: 177px; height: 100px; margin-top:1140px; z-index:7; } div.widget { position: absolute; top: 0; left: 50; margin-left: 457px; width: 380px; height: 288px; margin-top:784px; z-index:7; } div.newsfeed { position: absolute; top: 0; left: 50; margin-left: 50px; width: 385px; height: 165px; margin-top:870px; z-index:6; } div.mailinglist { position: absolute; top: 0; left: 50; margin-left: 50px; width: 380px; height: 50px; margin-top:1075px; } div.tv { position: absolute; top: 0; left: 50; margin-left: 50px; width: 680px; height: 340px; margin-top:1470px; z-index:6; } #mail { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 108px; margin-top:1435px; z-index:4; background: url(http://elvissalic.com/theachievers/email.png); } #mail:hover { background-position: top right; } #twitter { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 99px; margin-top:1540px; z-index:4; background: url(http://elvissalic.com/theachievers/twitter.png); } #twitter:hover { background-position: top right; } #youtube { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 102px; margin-top:1636px; z-index:4; background: url(http://elvissalic.com/theachievers/youtube.png); } #youtube:hover { background-position: top right; } #skype { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 104px; margin-top:1740px; z-index:4; background: url(http://elvissalic.com/theachievers/skype.png); } #skype:hover { background-position: top right; } #hotboy { display:block; position: absolute; top: 0px; left: 50%; margin-left: -410px; width: 403px; height: 66px; margin-top:1853px; z-index:9; background: url(http://img860.imageshack.us/img860/8505/paypalq.png); } #hotboy:hover { background-position: top right; } Does anybody have any ideas?. I apologize for being so simple but i am a complete beginner with all things CSS. Peter Hi, Here is the site I am working on: http://www.pizzaz-lingerie.com/launch.php It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one. -CJ This is my first css html design and its been quite a struggle. I've been reading about bugs and hacks for ie 6 but recognising them and implementing the changes I'm stumbling on. The pages that look the worst are : efficient-heat net / form and efficient-heat net / services. They have been decimated by ie 6. I've taken out the javascript navigation for validation reasons. I know about conditional comments so if I can I would like to make adjustments to the code rather than finding hacks. What's going on with these pages. Can you give me some suggestions of what I need to do. I appreciate any help, Thanks. Ok, some trouble with Fire Fox and IE. I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it. http://ernies.bombinaid.com Problems IE: The main box areas in each page keeps going over the menu! FireFox: In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping. Here is the css code: Code: body {background-color: black}
.header {width: 100%; margin-left: -1px; margin-top: -4px;}
.links {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2 {background: url(corner1.gif) 0 100% no-repeat}
.main3 {background: url(corner2.gif) 100% 100% no-repeat}
h3 {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link {text-decoration: underline; color: black;}
a:hover {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr {color: white}
img.ajm113 {margin-left: 30cm;}
Can someone help me out here? I'm trying to add tables to page in my Wordpress blog, and when I publish, there is TONS of white space between the previous paragraph and the table. It appears the more rows I have in the table, the more white space there is. Which makes me suspect that it might be something to do with the CSS stylesheet. Any ideas on how to solve this? In case you need it, the tables are about half-way down on this page: dominatelocalrankings.com/skeptical TIA for any help, Tom Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
I'm writing a modification for a bulletin board. One of the beta testers had a problem with their template... My modification uses a left & right float, with a clearing div at the bottom with a copy right. I know the problem, but my question is, why is it a problem: width="75%" will sometimes, in certain templates, make the right floating table drop down beneath the left floating menu, and it's width is 100%. When I change it to inline styling, style="width: 75%;", it works as it should. I'd really like to know why it's doing this, because I've never ran into this before. Here's a slimmed version of the HTML/CSS: Code: <div id="st0re_wrapper" style="float: left; width: 24%; clear: both;"> <table class="borderwrap iptable" cellpadding="3" cellspacing="2" width="100%"> <tr> <td colspan="" class="maintitle"><p>Your Menu</p></td> </tr> <tr> <td style="padding-left: 5px;" valign="middle"> <div style="margin-left: 5px;"> Sample menu item. </div> </td> </tr> </table> </div> <table class="borderwrap iptable" style="float: right;" cellpadding="3" cellspacing="2" width="75%"> <tr> <td colspan="" class="maintitle"><p>Sample</p></td> </tr> <tr class="row2"> <td valign="top" width="100%"> Sample content. </td> </tr> </table> The used CSS classes a Code:
.ipbtable
{
width: 100%;
}
table.ipbtable,
tr.ipbtable,
td.ipbtable
{
background: transparent;
color: #222;
font-size: 10px;
line-height: 135%;
}
.ipbtable td,
.divpad
{
padding: 5px;
}
.borderwrap,
.borderwrapm
{
background: #edede7;
border: 1px solid #91908B;
color: #55554F;
padding: 0px;
margin: 0px;
}
.borderwrapm
{
margin: 5px;
}
.borderwrap h3,
.maintitle,
.maintitlecollapse
{
background: url(style_images/convention/maintitle.gif);
color: #f6f4ef;
font-size: 12px;
font-weight: bold;
margin: -1px;
padding: 7px 7px 7px 12px;
}
.maintitle td
{
color: #EEEDE8;
font-size: 11px;
font-weight: bold;
vertical-align: bottom;
}
.maintitlecollapse
{
border: 1px solid #FFF;
}
.maintitle p,
.maintitlecollapse p,
.formsubtitle p
{
background: transparent !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
st0re_wrapper is just an unused id, besides the inline styling. Code: <tr class='firstrow'> <th width=10%><strong>Rank</strong></th> <th width=40%><strong>Site</strong></th> <th width=25%><strong>In</strong></th> <th width=25%><strong>Out</strong></th> </tr> that makes it exactly the way i want, but when i switch to Code: <tr class='firstrow'> <th style='width=10%'><strong>Rank</strong></th> <th style='width=40%'><strong>Site</strong></th> <th style='width=25%'><strong>In</strong></th> <th style='width=25%'><strong>Out</strong></th> </tr> it is sized naturally. Internet Explorer always presents me with a challenge (partial repost). The current issue involves emulating max-width in IE using the technique described by Svend Tofte. http://www.svendtofte.com/code/max_width_in_ie/ The CSS code uses JavaScript expressions and feeds the browser's width to the style. The CSS code follows. * html #Content { height: 1%; width:expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize)? "30em": "auto" ); } This implementation resizes and displays the fluid width in IE. But it does not emulate the max-width property. Basically, I need help fixing the max-width implementation on #Content. Since max-width remains a challenge in IE, the min-width remains a greater mystery. Min-width would be nice as well. The page is complex with several wrappers for other IE display issues and JavaScript functionality. Presently, these workarounds and hacks have my head spinning. The page has an overall wrapper #Container. #Content div has the max-width expression. It encases #div.bgWh, so the page could have true transparent round corners. One issue relates to how div.bgWh expands beyond #Content when the client's browser width approaches 260 pixels. These containers serve a purpose; but IE does not deal with their width in a predictable manner. Fortunately, Firefox does not have these issues. These scenarios leave me scratching my head more often than not. Overflow hidden property has worked for me in the past, but did not provide the magic bullet this time around. Please load the page and shrink you browser to around 260 pixels. Keep your eye on the round corners around the main content area. The container, div.bgWh, expands beyond #Content. Please let me know if you see any relevant patterns and if you have any useful suggestions on implementing max-width. Somebody may suggest better approaches to the IE max-width conundrum. http://neville.f2o.org/nifty_TEMP1.html Styles in Question #Content div.bgWh #Container Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie Hello. I have a section where I have a few floats. For some reason IE 6 is not using the width I'm passing over for the div but IE 7 and firefox are working good. The bot locations should be beside each other along with the address, phone ect. http://www.nessphysiotherapy.com/contact.php Here is a section of the code the has the div CSS. Quote: .twoColFixRtHdr #container2 #mainContent2 #leftContent #ContactInner #ContactILeft { float:left; width:70px; } .twoColFixRtHdr #container2 #mainContent2 #leftContent #ContactInner #ContactIMid { float:left; width:200px; } .twoColFixRtHdr #container2 #mainContent2 #leftContent #ContactInner #ContactIRight { float:left; width:180px; } Suggestions? |
|||||||