|
CSS - Float / Margin Issues In Ie6? You Don't Say
so, 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>
Similar TutorialsBackground 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;
}
Just when I think I'm starting to get a handle on things, I run into yet another mystery... Take something like this: Code: <div style="background: orange; float: left;"> This is floated. </div> <div style="background: blue; margin-top: 600px; "> This is not floated. </div> In IE6 (don't have 7 on this machine) and Opera, I get what I expect -- an orange element and 600 pixels below that, a blue element. In Firefox both the orange and blue elements are moved 600 down. Thinking it has something to with clearing, I add: Code: <div style="background: orange; float: left;"> This is floated. </div> <div style="background: blue; clear: left; margin-top: 600px; "> This is not floated. </div> IE6, same result. Firefox and Opera, both elements are now at the top of the page. (clear: both same result) So now I try just adding some other content to the page: Code: <p>This is some text.</p> <div style="background: orange; float: left;"> This is floated. </div> <div style="background: blue; clear: left; margin-top: 600px; "> This is not floated. </div> This mysteriously fixes the issue in Firefox, so now IE and Firefox display the same. Opera still groups the two colored elements together. I'm sure there's something simple I'm not understanding here...any ideas? I have a page that has a header, footer, left content box, and right sidebar. I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box. It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer). I have uploaded the page on one of my servers:test page page so you can see it in action. Here's the CSS/HTML code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}
div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}
div#headerbox {
border: solid 1px gray;
width: 741px;
height: 95px;
}
div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}
#middlecontent {
border: solid 1px purple;
margin-right: 210px;
text-align: left;
}
div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}
div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}
</style></head>
<body>
<div id="pageframe">
<div id="headerbox">
<h1>This is the Header.</h1>
</div>
<div id="whiteboxes">
<div id="middlecontent">
<h1>middle content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
</div><!-- end middlecontent -->
<div id="rightside">
<h1>right frame</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
</div>
</div><!-- end whiteboxes -->
<div id="footer">
<p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
</div>
</div><!-- end pageFrame -->
</body></html>
Any help is greatly appreciated. I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here. PseudoCSS: Code: #topdiv{
width:960px;
}
#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}
.previous a{
background: url('images/previous.png') no-repeat;
}
.previous a:hover {
background-position:0 -62px;
}
PseudoHTML: Code: <div id="topdiv"><a href="" class="previous">Link</a></div> <div id="bottomdiv">Content</div> When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements? 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> 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? 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? 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>
Howdy folks. I'm working on a site right now with a fixed sized menu on the left, and a fluid layout to the right of it. I CANNOT get the h1 header to come up to the top in FF!!! Here's the page, and here's the CSS. I found a link on how to do it thru bonrouge's site...but it's not quite working how i want it to. Thanks! What a giant surprise here but I need some assistance with my CSS Float . In FF, Safari, and IE6 everything displays correctly. However, Opera 9.64 and IE7 / IE8 have major issues. I know there are still a few quirks in my physical XHTML mostly Alt attributes not filled in yet (I'm more worried about full cross browser compatibility). I have eliminated tables for everything possible but have had more problems by removing all of them. Live Site: moo-ving dot com I hate to make everyone type it out sorry. 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 I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this. HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer Hi, I have been working my way through the awesome 'Beginning CSS Web Development' by Simon Collison (highly recommended). I have also been studying and using other recourses online too. I am now toying with CSS and have created the following test page. consumer-review [dot] org [dot] uk [slash] test_lorum_ipsum [dot] html The External Style Sheet can be found at consumer-review [dot] org [dot] uk [slash] css [slash] default [dot] css I am pretty happy with it in Firefox 2. However there are three problems that no one has so far been able to help me with? Could you be the CSS genius that solves the problem? I hope so! 1) In IE6 the two floating elements (the smaller boxes on the right) don't appear where they should - they jump around the page and sometimes the content of them doesn't appear at all! Is there a simple code fix for this? 2) In Firefox 2 and Safari the links in the footer don't seem to be accessible (on my two PCs anyway), the pointer icon simply doesn't change to allow you to click! This is pretty strange! 3) In IE7 the titles/anchors that you jump to from the top of the page don't highlight. They highlight a nice yellow in Firefox! Is is possible for IE7 to highlight headers when they are jumped to via an anchor? I have been playing with this page for ages, there is probably plenty of redundant / clumsy code in the CSS sheet. Apologies for that, have only been learning for a few weeks and will neaten up when understand a bit more! I will also speed up the page loading. Thanks for any code suggestions / advice / assistance anyone can give. Good luck. Kind regards Theo. How come sometimes when I try to float left a div next to another div, it appears underneath the original and not all next to it? <div1></div1> <div2></div2> If I use float left on div1, div2 appears underneath div1, not next to it? confused beyond help! Greetings, Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? 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 always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) 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? |
|||||||