CSS - Margin Issues
i dont understand why i sometimes can put margin-top and why i sometimes cant :S i dont get it at all.
look at this: http://www.xgs-gaming.com/ladder_system_1.1/index.php these are the relevant wrappers: as you can see i try to margin the log in div which i will fill up with forms, but i cant position it where i want, it just rapes the whole header :S why Code: .page_wrapper { margin: 0 auto; width: 1240px; } .header_menu_wrapper { background-color:red; width:1236px; height:311px; } .middle_wrapper { width:1236px; background-color:#dfdfdf; } .column_small_wrapper { float: left; width: 320px; } .column_mid_wrapper { float: left; width: 596px; } .column_big_wrapper { float: left; width: 916px; } .header_container { background-color:blue; background-image:url('../images/header_top.jpg'); width:1204px; height:228px; } .menu_container { background-color:white; background-image:url('../images/header_bottom.jpg'); width:1204px; height:53px; } .login_container { display:block; width:480px; height:28px; margin-top:100px; margin-left:710px; background-color:red; } this is the html code: Code: <div class="page_wrapper"> <div class="header_menu_wrapper"> <div class="header_box_wrapper"> <div class="header_box_noheader"></div> <div class="header_box_main_container"> <div class="header_container"> <div class="login_container"></div> </div> <div class="menu_container"> <?php require "menu.php"; ?></div> </div> <div class="header_box_bottom"> </div> </div> </div> <div class="middle_wrapper"> <div class="column_small_wrapper"> <div class="small_box_wrapper"> <div class="box"><p>Top 10 Online Standings</p></div> <div class="small_box_main_container_padding"> <?php require "online_standings_part.php"; ?> </div> <div class="small_box_bottom"> </div> </div> <div class="small_box_wrapper"> <div class="box"><p>Top 10 Offline Standings</p></div> <div class="small_box_main_container_padding"> <?php require "offline_standings_part.php"; ?> </div> <div class="small_box_bottom"> </div> </div> <div class="small_box_wrapper"> <div class="box"><p>10 Recent Groups</p></div> <div class="small_box_main_container_padding"> </div> <div class="small_box_bottom"> </div> </div> </div> <div class="column_mid_wrapper"> <div class="mid_box_wrapper"> <div class="box"><p>Member Login</p></div> <div class="mid_box_main_container_padding"> <?php require "form_login.php"; ?> </div> <div class="mid_box_bottom"> </div> </div> <div class="mid_box_wrapper"> <div class="box"><p>F.A.Q</p></div> <div class="mid_box_main_container_padding"> </div> <div class="mid_box_bottom"> </div> </div> </div> <div class="column_small_wrapper"> <div class="small_box_wrapper"> <div class="box"><p>Shoutbox</p></div> <div class="small_box_main_container_padding"> <?php require "shoutbox.php"; ?> </div> <div class="small_box_bottom"> </div> </div> </div> </div> </div> Similar Tutorialsso, i have a form with rounded corners, which i've had no problems with in the past. the problem here is that the background color behind the box with the rounded corners is going to be user-generated and the box itself can change in width. my solution was to float the corners left and right and have the rest filled in the middle. works perfectly in firefox, giving the middle element an automatic width with margins on either side equal to the size of the corner images. however, IE decided to add in extra space between the 3 elements. ive tried giving the elements a display:inline-block property, but it didnt help. Code: #petition_letter { width: 330px; margin: 25px auto 0; } .lettertop .left, .lettertop .right { display: block; width: 15px; height: 15px; background-image: url(lettertop.gif); background-repeat: no-repeat; } .letterbottom .left, .letterbottom .right { display: block; width: 15px; height: 40px; background-image: url(letterbottom.gif); background-repeat: no-repeat; } .letterbottom .right { width: 40px; } .lettertop .left { float: left; background-position: top left; } .lettertop .right { float: right; background-position: top right; } .letterbottom .left { float: left; background-position: bottom left; } .letterbottom .right { float: right; background-position: bottom right; } .lettertop .middle, .letterbottom .middle { display: block; height: 15px; margin: 0 15px; background: #fff; } .letterbottom .middle { padding-bottom: 25px; padding-left: 15px; margin-right: 40px; } .lettercontent { border-bottom: 1px solid #fff; background-color: #fff; padding: 0px 30px; font-size: 12px; } <div id="petition_letter"> <div class="lettertop"> <span class="left"></span> <span class="right"></span> <span class="middle"></span> </div> <div class="lettercontent textColor"> blah blah </div> <div class="letterbottom"> <span class="left"></span> <span class="right"></span> <span class="middle"></span> </div> </div> Here's what I've got. I'm stacking divs on top of each other, each div has floated elements contained within them and all is fine in IE 7. However, in IE 6 I'm getting a couple pixel difference in margin once the text spans past the grey div that's floated to the left. I cannot for the life of me figure out why this occurring. Here's some sample code which performs fine in IE7 & Firefox: Code: <style type="text/css"> .logoInfoBlock { margin-top:25px; } .logoInfoBlock p { padding:0px; margin:0px; } .logoInfoBlock a { font-weight:bold; text-decoration:none; color:#006699; } .logoInfoBlock a:hover { font-weight:bold; text-decoration:underline; color:#979797; } .logoInfoBlock .name { font-size:.9em; font-weight:bold; color:#000; vertical-align:top; margin-top:3px; margin-bottom:3px; padding:0px; } .logoInfoBlock .value { font-size:.8em; font-weight:normal; color:#000; padding:0px; margin:0px; vertical-align:top; } .logoHardDrive { /*background:url(images/logo_harddrive.png) no-repeat;*/ background-color:#999999; width:48px; height:48px; float:left; } .hard_drive_info { margin-left:53px; } .hard_drive_info > div { width:350px; } </style> Code: <div class="logoInfoBlock"> <div class="logoHardDrive"></div> <div class="hard_drive_info"> <p><span class="name">Hard Drive:</span> <span class="value">C:</span> <span class="value">565.94 GB</span></p> <p><a href="">Text Here</a></p> <p><a href="">Text Here</a></p> <p><a href="">Text Here</a></p> <p><a href="" target="">Additional Text Here</a></p> </div> </div> <div class="logoInfoBlock"> <div class="logoHardDrive"></div> <div class="hard_drive_info"> <p><span class="name">Hard Drive:</span> <span class="value">C:</span> <span class="value">565.94 GB</span></p> <p><a href="">Text Here</a></p> <p><a href="">Text Here</a></p> <p><a href="">Text Here</a></p> <p><a href="" target="">Additional Text Here</a></p> </div> </div> In IE6, any text that appears below the bottom of the grey box, has a 1 or 2 pixel less indentation than the rest of the text. Any suggestions? I'm having problems getting Mozilla to display my page correctly. I've narrowed it down to being a margins thing. The following code is a simple example of the problem I'm having. 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=iso-8859-1" /> <title>Test</title> </head> <body style="margin: 0;"> <div style="background-color:#F00; height: 100px;"> <div style="margin: 20px;">This should be 20px from all sides of the red box</div> </div> </body> </html> This should display as a 100 pixel high red box that spans the width of the browser window and is adjacent to the top of the browser window. The text should be displayed indented 20 pixels from the top left corner of that box. Instead, I am getting a red box with the correct height and width only there is a gap between the top of the window and the box. The text is positioned 20 pixels from left side as it should be but it is not positioned 20 pixels from the top. It looks almost as if it applied the top margin to the red box rather than the <div> containing the text. What's even stranger, if I add a border to the red box: Code: <div style="background-color:#F00; height: 100px; border: 1px solid #000;"> it displays as expected. And not that it matters but IE also displays the original code as expected. Is there something simple that I'm missing here? Nevermind guys, I figured it out. I looked back at an old thread I posted about a year ago with the same issue. The fix was to add vertical-align: top; to the flt_rt img css. ========================================== This issue is affecting both FF (3) and IE (6)...I haven't tested in another browser yet. I just inherited this site and am in the process of converting it from a table layout to valid css. EVerything's going pretty well with the exception of my right column images. An approximately 5px gap is appearing so the images do not fit flush. I have looked at this so long that I can't see where it's happening and would appreciate another set of eyes. This version of the site is on a private test server, so I've attached screenshots. In each screenshot you will see the gap colored in green. In FF it appears below the images, while in IE it's appearing in between. Thanks in advance! Here is my css: Code: @charset "UTF-8"; body { background-color: #191919; margin-top: 5%; } .heading { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; color: #000000; padding-left: 30px; padding-top: 30px; text-align: left; } .heading2 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #B3DB10; display: block; width: 525px; padding-left: 30px; line-height: 140%; padding-top: 10px; } .style2 { color: #FFFFFF; background-color: #7d990b; display: block; position: static; padding-left: 8.5px; height: 18px; padding-top: 5.5px; }.maintext { font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 140%; padding-top: 0px; padding-left: 35px; padding-right: 30px; color: #333333; } .column1 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 140%; padding-top: 0px; padding-left: 35px; padding-right: 30px; color: #333333; } .column2 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 140%; padding-top: 0px; padding-left: 0px; padding-right: 30px; color: #333333; } .heading3 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #999999; display: block; width: 525px; padding-left: 30px; line-height: 140%; padding-top: 10px; } .maintext2 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 200%; padding-top: 30px; padding-left: 30px; padding-right: 30px; color: #CCCCCC; } .heading4 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #CCCCCC; display: block; width: 525px; padding-left: 30px; line-height: 140%; padding-top: 0px; } HTML (with some content removed) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Home - .</title> <link href="style1.css" rel="stylesheet" type="text/css" /> <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style3 {color: #B3DB10} --> #container { width: 925px; height: 600px; text-align: center; margin: 0 auto; padding: 0; } #nav { float: left; width: 200px; height: 425px; background-color: #b3db10; } #nav ul { margin: 27px 0 0 0; padding: 0; } #orion_logo { border: none; } #rcol { float: right; height: 425px; width: 725px; } #heading { float: left; height: 47px; width: 475px; background-color: #ababab; padding: 53px 0px 0px 30px; margin: 0; font: 20px normal; font-family: Arial, Helvetica, sans-serif; color: #000000; text-align: left; } #maintext { clear: left; float: left; background-color: #FFFFFF; height: 325px; width: 505px; text-align: left; } #flt_rt { float: right; width: 220px; height: 425px; background-color: green; padding: 0; margin: 0; } #flt_rt img { padding: 0; margin: 0; } #heading2 { clear: both; height: 155px; width: 725px; background-color: #000000; text-align: left; padding-left: 200px; padding-top: 20px; } </style> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body> <div id="container"> <div id="nav"> <a href="http://"> <img src="images/logo.png" width="200" height="100" alt="Orion logo" title="http://www..com" id="orion_logo"/> </a> <ul id="MenuBar1" class="MenuBarVertical"> <li><span class="style2"> Home</span> </li> <li><a href="02.html"> Proven Credibility</a></li> <li><a href="03.html"> Leading-Edge Products</a> </li> <li><a href="04.html"> Benefits of the Program</a></li> <li><a href="05.html"> Benefits of the Products</a></li> <li><a href="06.html"> Benefits of the Partnership</a></li> <li><a href="07.html"> Contact</a></li> <li><a href="http://www.com/login.asp"> Partner Login</a></li> </ul> <a href="07.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/apply2.gif',1)"><img src="images/apply1.gif" name="Image4" width="100" height="20" hspace="50" vspace="30" border="0" id="Image4" /></a> </div> <div id="rcol"> <h1 id="heading">Stake Your Claim in a Billion Dollar Industry!</h1> <div id="flt_rt"> <img src="images/orion2.jpg" width="220" height="216" alt="" /><img src="images/orion05.jpg" width="220" height="209" alt=""/> </div> <div id="maintext"> <p class="maintext">text here<br />T</p> <p class="maintext">text here</p> <p class="maintext"><strong></strong>, President and CEO</p> </div> </div> <div id="heading2"> <span class="maintext2">The U.S. Retrofit Market Opportunity:</span> <span class="heading4"><span class="style3">text<br /> <span class="style3">20.6 billion</span> square feet need to be retrofitted*<br /> <span class="style3">$9.6 billion</span> retrofit market size</span> <span class="maintext2">*Source: EIA 2003</span> </div> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> </div> <!-- end container --> </body> </html> Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael On my new design: http://codymays.net/~private_ftp/theed The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers. I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason. Any ideas/suggestions on what to do here would be appreciated. Thanks, Cody I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Site Test</title> <link rel="stylesheet" type="text/css" href="redo.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> </head> <body> <div id="top_filler"> </div> <div id="left_filler"> </div> <div id="right_filler"> </div> <div id="top_left"> </div> <div id="header"> </div> <div id="top_right"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Etc, etc, etc....</p> </div> <div id="bottom_filler"> </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </body> </html> The CSS Code: * { margin: 0; padding: 0; } body { background: #fdd9e9; } div#top_filler { background: url(images/bg_slice_sm.png) repeat-x; width: 100%; height: 164px; position: fixed; top: 0px; z-index: 5; } div#left_filler { background: url(images/left_slice_sm.png) repeat-y; width: 174px; height: 100%; position:fixed; left:0px; z-index: 5; } div#right_filler { background: url(images/right_slice_sm.png) repeat-y; width: 161px; height: 100%; position:fixed; right: 0px; z-index:5; } div#bottom_filler { background: url(images/bottom_slice_sm.png) repeat-x; width: 100%; height: 76px; position: fixed; bottom: 0px; z-index: 5; } div#header { position: fixed; top: 0px; left: 37%; height: 125px; width: 316px; margin: 0 auto; background: url(pink_logo2.png) no-repeat; z-index: 25; } ul.NoBulletNoIndent { list-style-type: none; margin-left: 0px; padding-left: 0px } div#top_left { height: 314px; width: 221px; background: url(images/left_top_corner_sm.png) no-repeat; position: fixed; top: 0px; left: 0px; z-index: 5; } div#bottom_left { height: 175px; width: 176px; background: url(images/left_bottom_corner_sm.png) bottom no-repeat; position: fixed; bottom: 0px; left: 0px; z-index: 5; } div#top_right{ height:174px; width:174px; background: url(images/right_top_corner_sm.png) top no-repeat; position: fixed; top:0px; right: 0px; z-index:5 } div#bottom_right{ height: 602px; width:198px; background: url(images/right_bottom_corner2_sm.png) bottom no-repeat; position: fixed; bottom: 0px; right: 0px; z-index: 5 } div#content { margin: 40px 164px 0px 180px; position: relative; z-index: 1; } Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */ .lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC} .lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat} .lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat} .lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px} .clear {font-size: 1px; height: 1px} .topform { position: absolute; right: 5px; top: 65px; width: 300px; font-size: 10px; font-family: myriad, verdana, sans-serif; text-align: right; } input, form { font-size: 11px; font-family: myriad, verdana, sans-serif; margin-bottom: 0px; margin: 0px; } /* End of SEARCH Bar */ Which refers to this part of my index.php page: Code: <!-- Top right SEARCH --> <div class="topform"> <div class="lb_bl"> <div class="lb_br"> <div class="lb_tl"> <div class="lb_tr"> <form name="form" id="form" method="post" action=""><input name="search" type="text" /> <input name="search" type="button" value="SEARCH" /></form> </div> </div> </div> </div> <div class="clear"> </div> </div> <!-- End of top right SEARCH --> But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code: html { font: normal 12px verdana, arial; background-color: #000 } body { text-align: center } #fw-container { margin: 0 auto; width: 1000px; text-align: left } .hasSidebar #fw-container { width: 1000px; } a, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } /* --- Header --- */ #fw-head { position: relative; height: 196px; background: #242424; } #fw-title { font: bold 26px verdana; letter-spacing: -1px; position: absolute; top: 20px; left: 20px; padding: 0; margin: 0; z-index: 10; } #fw-title a, #fw-title a:visited, #fw-title a:hover { color: #fff; } .fw-logo { width: 760px; height: 196px; position: absolute; } .hasSidebar .fw-logo { width: 1000px; } /* --- Navigation --- */ #fw-mainnavwrap { background: #242424; padding: 10px 20px; font-family: arial; font-weight: normal; border-top: 1px solid #000; border-bottom: 1px solid #000; } #fw-mainnavwrap ul { margin: 0; padding: 0; background: transparent; list-style-type: none; } #fw-mainnavwrap li { margin: 0px 15px 0px 0px; display: inline; } /* --- Content --- */ #fw-bigcontain { width: 760px; float: left; } .fw-paragraph { background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left; border-bottom: 1px solid #000; padding: 15px 20px 10px; overflow: hidden; } .fw-title { margin: 0px 0px 10px; font: 18px verdana; color: #fff; } .fw-text { margin-bottom: 10px; } /* --- Sidebar stuff --- */ .hasSidebar #fw-sidebar { width: 239px; float: right; font-size: 12px; clear: right; border-left: 1px solid #000; } #fw-sidebar .fw-title a, #fw-sidebar .fw-title a:visited, #fw-sidebar .fw-title a:hover { color: #fff; text-decoration: none; } #fw-sidebar .fw-title { font-size: 1.3em; font-weight: normal; } /* --- Footer --- */ #fw-footer { font: normal 10px verdana, sans-serif; background: #242424; margin: 0px; padding: 11px 0px 1px; color: #999; clear: both; width: 760px; } .fw-footertext { background: #161616; border-bottom: 1px solid #000; border-top: 1px solid #000; margin: 0px; padding: 6px 0px 6px 20px; } i am having a serious issue with ie 7 i really need help. i am using a center layout using 900px the center layout looks and works fine in all browsers except for ie7 i have used a border for the wrapper tag. what i have noticed only in the case of ie7 is the left border for the wrapper tag starts a few pixels 2px or 3px before compared to all other browsers and due to this in ie7 the right border ends a few pixels when compared to all other browsers. so if i can fix the left border the right border for the wrapper tag will adjust automatically. i am using a valid xhtml transitional document. following is my 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>Background image</title> <style type="text/css"> body { text-align: center; margin: 0; font-family: Verdana; font-size: 10px; } #wrapper { width: 900px; text-align: left; margin: 0 auto; border: 1px solid #ffff00; } p{ margin: 0; padding: 0; } </style> </head> <body> <div id="wrapper"> <p>Content </p> </div></body></html> ------------------------------- can someone please tell me what the issue is and what the code should be. i would highly appreciate any help as this is an issue in ie7 and not in other browsers. thanks. I must be really dumb or blind here... For some reason i cant seem to get div.show_listing to actually move up. Sorry for my ignorance here in CSS, but i learn as i go. css Code: Original - css Code .container { display: block; margin-top: -32px; margin-left: 3px; width: 780px; overflow: hidden; border: 1px solid #cccccc; } /* Start Mac IE5 filter \*/ div.left_menu, div.show_listing { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } /* End Mac IE5 Filter */ div.left_menu { margin-top: -32px; width: 150px; border-left: 1px solid #cccccc; height: 250px; background: #fbfbfb; border: 1px solid #cccccc; } div.show_listing { margin-top: -32px; margin-left: 155px; width: 620px; border: 1px solid #cccccc; }
html Code: Original - html Code <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div> <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div> Again sorry for my ignorance. ( just incase its viewable here ) Hi, Im creating a list that shows a photo and personal data of people. It's he http://tiregarfio.byethost17.com/web/frontend_dev.php/miembros username: fer password: m When i load it with IE6 i can see the list, but between the photos there are little space. I FF there isn't any space. Is that the bug of the "doubled margin" of IE6? Regards Javi Hello, I am working on my website w w w . pujckyvcr . c z and there is problem with IE. Firefox is ok, in top menu, there is text with same margin from top and bottom. When you look on it in IE, text is 1px upper and text is more to up. Then hover isn't symmetrical from top and bottom in menu. Do you know how to fix thix IE bug? Thanks you, Jiri Hi All, I am having a hard time aligning an element on my site. The problem is I am floating an element to the left and it wont cross all the way to the right, its like the margin to the right doesnt exist and the text goes to the next line when there is room (so it seems) to the right. Go to j4media.com to see what I mean...look in the sidebar and the problem is in the first bullet under the 'recent message board posts'. Here's the CSS: Code: .sidecnt { /* individual container in sidebar */ background: #040c0f url(jimg/sb_bg1.jpg) repeat-x; width: 245px; height: auto; border: 1px solid #000000; border-bottom: 6px solid #172e34; padding: 2px 2px 7px 2px; }.sidecnt h2 { /* container title image */ float: left; } .sidecnt h3 { /* container title */ float: right; color:#050608; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size: 10px; }.sidecnt h4 { /* tag text */ float:left; margin: 25px -12px 2px 1px; /* top, right, bottom, left */ padding-bottom: 5px; font-family:Arial, Helvetica, sans-serif; } .sidecnt1 { /* individual container in sidebar - other than tag box */ background: #FFFFFF url(jimg/sb_bg1.jpg) repeat-x; width: 245px; height: auto; border: 1px solid #000000; border-bottom: 6px solid #172e34; padding: 2px 2px 7px 2px; }.sidecnt1 h2 { /* container title image */ float: left; } .sidecnt1 h3 { /* container title */ float: right; color:#050608; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size: 10px; }.sidecnt1 h4 { /* text elements */ float:left; margin: 25px -12px 2px 1px; /* top, right, bottom, left */ padding-bottom: 5px; font-family:Arial, Helvetica, sans-serif; } .sidecnt1 ul { float:left; margin-top: 25px; /*top, right, bottom, left*/ padding-bottom: 1px; font-family:Arial, Helvetica, sans-serif; } and here's the HTML: Code: <div class="sidebar"> <div class="sidecnt"> <h2><img src="(URL address blocked: See forum rules)"></h2> <h3>j4media tags</h3> <h4> <?php UTW_ShowWeightedTagSetAlphabetical("coloredsizedtagcloud","",0) ?> </h4> </div> <br> <div class="sidecnt1"> <h2><img src="(URL address blocked: See forum rules)"></h2> <h3>Subscribe</h3> <div class="subscriberss"> <form name="subsform"> <a href="#"><img src="<? echo get_settings('home')."/wp-content/themes/i-feel-dirty/img/";?>feedicon.gif" alt="RSS" /></a> <a href="<? echo get_bloginfo('rss_url');?>" class="rsstext">RSS</a> <select name="aggs"> <option value="(URL address blocked: See forum rules)<? echo get_bloginfo('rss_url');?>">Bloglines</option> <option value="(URL address blocked: See forum rules)<? echo get_bloginfo('rss_url');?>">Feedness</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">My Yahoo!</option> <option value="(URL address blocked: See forum rules)=rss&ut=<? echo get_bloginfo('rss_url');?>">My MSN</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">NetVibes</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Newsgator</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Rezzibo</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Rojo</option> <option value="(URL address blocked: See forum rules)/faves?add=<? echo get_bloginfo('rss_url');?>">Technorati</option> </select> <a href="#" class="btnnofloat" onclick="window.location.href = document.subsform.aggs.options[document.subsform.aggs.selectedIndex].value;"><img src="<? echo get_settings('home')."/wp-content/themes/i-feel-dirty/img/";?>okbutton.gif" title="ok btn" alt="ok" /></a> </form> </div> </div> <div class="sidecnt1"> <h3>Recent Message Board Posts</h3> <ul> <?php if (function_exists('wpphpbb_topics')):?> <? wpphpbb_topics();?> <?php endif;?> </ul> </div> <div class="sidecnt1"> <h3>Categories</h3> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </div> <div class="sidecnt1"> <?php /* If this is the frontpage */ if ( is_home() ) { ?> <?php if(get_links(-1,'', '','', false, 'name',false,false,-1, false, false)){ ?> <h3>Blogroll</h3> <ul><? get_links(-1,'<li>', '</li>','', false, 'name',false,false,-1, false, true); ?></ul> <? } ?> </div> <div class="sidecnt1"> <h3>Site Tools</h3> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="(URL address blocked: See forum rules)" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="(URL address blocked: See forum rules)/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="(URL address blocked: See forum rules)/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> <?php wp_meta(); ?> </ul> <?php } ?> </div> </div> <div class="clearfix"></div> <br></div> Thanks in advance for your help! Jrexi |