|
CSS - Css Table - Funny Margin Behavior
I have two column divs in my main div. They have the same margin setting but the second one mainright seems to be ignoring it... and both have width tags (that's doing something).
(URL address blocked: See forum rules) and (URL address blocked: See forum rules) my wrapper has a min-width of 780px Is it margin doubling? when i took the border and margin out of the mainleft div, it slammed to the wall of the container div. is there a hack for this? i want my 2 columns to have identical alignment... Code:
#left {
float:left;
width:230px;
text-align:left;
font-size: 12px; border:1px solid red;
}
#left p {/* margin:10px;*/ padding:0;}
#main {
position:relative;margin-right:100px;
text-align:left;
}
#main h1,h2,h3,h4 {margin:0; padding:0; display:inline;}
#main p {margin:5px; padding-left:5px;}
#mainleft {
margin:5px;
float:left;
width:250px;
border:1px solid red;
text-align:left;
}
#mainright {
margin:5px;
padding:5px;
/**/ position:relative;
/* float:right; only made it float right but still below the left */
text-align:left;
margin-left:490px;
width:250px;
border:1px solid red;
}
/******* THE HTML *********/
<div id="left">
<div class="prop"></div>
<!-- the old createnavbar could go here or a photo -->
<?php include 'leftcol.php' ?>
<div class="clear"></div>
</div><!-- left -->
<div id="main">
<div id="mainleft">
<h4>News</h4><br />
<p>copy.......</p>
</div><!-- mainleft -->
<div id="mainright">
<h4>Features</h4><br />
Many are free; Some have value.<p> </p>
<ul>
<li>bunch of stufff</li>
</ul>
</div><!-- mainright -->
</div><!-- main -->
Similar TutorialsWell strange on IE 5.2 for mac (I am assuming others are ficked too) I have a div in which I want to put paragraphs in... Code:
<html>
<head>
<style type="text/css">
#midRight {
position:relative;
top:20px;
left:160px;
width:550px;
padding:0px;
margin:0px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="midRight">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
</div>
</body>
</html>
Everything works fine on firefox (as one would expect) but on IE the first paragraph displays fine (at the left edge of the DIV) but all the rest indent themselves to the right by 160px (or whatever I change the left:xx px; of the div to. This is bizzare! I cant work out why the first one would be fine but all the rest indented. Anybody know how I can fix this? (so IE looks like this) Code:
line 1
line2
line3
line4
line5
etc Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible. My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins. Code: OOOO === OOOO OOOO === OOOO OOOO === There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though. So how did I implement this? I figured this was simple enough: Code: <div> ... <div class="left-square">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> ... </div> And the CSS would then look something like this: Code:
.left-square {
width: 100px;
height: ...px;
float: left;
}
.right-short-rectangle {
margin-left: 110px;
margin-bottom: 5px;
height: ...px;
}
So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin). By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters). So, does anyone have any idea about what's going on here? EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables? I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: I don't know why my tables look so weird, in Firefox they look fine as you can see in http://info.mooseheadbeer.com/graphics/table2.jpg - http://info.mooseheadbeer.com/graphics/table1.jpg shows what it looks like in Firefox. my CSS is as follows: Code: body {
background-color: #FFFFCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #333333;
}
td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #330000;
}
a {
color: #330000;
}
img {
border: 0px;
}
form {
background-color: #CCCC99;
}
.title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
line-height: 30px;
background-color: #990000; color: #FFFF66;
}
.subtitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #660000; font-style: oblique;
}
.header {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
background-color: #990000;
color: #FFFF66;
}
.nav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
background-color: #CCCC66;
}
.navLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background-color: #DEDECA;
}
a:hover {
color: #DEDECA;
background-color: #330000;
}
.sidebar {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 18px;
padding: 3px;
background-color: #FFFF99;
}
.sidebarHeader {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 18px;
color: #FFFF99;
background-color: #999933;
font-weight: bold;
}
.sidebarFooter {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 18px;
background-color: #FFFF99;
color: #990000;
}
.footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
line-height: 22px;
color: #333333;
background-color: #FFFF99;
}
.legal {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color: #333333;
}
.box1 {
border-width: 2px;
border-color: #CCCCCC #333333 #333333 #CCCCCC;
border-style: dotted;
}
.promo {
font-family: "Times New Roman", Times, serif;
color: #000033;
}
.titlebar {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #FFFFFF;
background-color: #336699;
}
.dingbat {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #CCCC99;
color: #660000; font-weight: bolder; font-size: medium;
}
input.big {
width: 100px;
}
input.small {
width: 50px;
}
I've seen it before but I really want to accomplish this and my friends are saying I need to you CSS to accomplish my task. I work for a support company maintaining the web app. At random times I want to enable my "Magic Floating Button" Basically here is what I need help with. I want my submit button to move away from the user when they mouse over it. This way they can never click submit and they chase the button around all day. Please help me with how to accomplish this. Thanks, Chris I have delved into building websites using CSs instead of tables. It looks great in IE 7 and above and Firefox, but in IE 6 it is out of whack badly. Like all the divs are on one side, when all the measurements are correct and should fit. Is there something I am doing wrong, it looks right even when I look at it in Dreamweaver. Is there a special method you should always apply when building a CSS website, like always add border:none; on all divs, just the same way, that you always have to add border: 0; on all images otherwise a border will appear? 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? So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right. I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css 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;
}
Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian 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! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks 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 set up my photo pages so that each photo is in its own "bin" div with a caption. Each bin has the same width but different heights due to different caption lengths. All of the bin divs are coded to float left, so they stack vertically when there is only enough screen width for one. When the screen is wide enough to accomodate more than one, the divs that are wrapped to the next line (so to speak) start below the tallest previous div which can leave a lot of empty space. I'm sorry if this is confusing, a perfect example of what I am talking about can be found here with a browser window over 1024px wide: http://www.bsuto.com/photoblog/2006/05/27/ And the css is he http://www.bsuto.com/internal/sheet.css Does anybody have an idea of how to eliminate the empty space? Thank you all so much. Why is this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'> RECENT BLOGS </span> </div> different than this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'>RECENT BLOGS</span> </div> Why is IE7 adding its own padding when i don't add a nl between the span and the content within the span? It's the display:block issue that also happens with images. But I just can't understand why IE7 would add spacing there, the 2 above are almost identical. Hi. I have noticed a strange behavior with my CSS and I cannot figure out a way to fix it. I have some css to override the body tag style. It sets the font family and size. I need to do this. However, when I use the font-size in the body, it adds extra pixels to a set of span tags that I use. (see attached picture). Here is my code. Does anyone know how I can include the font-size in the body, but not have that extra space in my div tags? Note: the sample image contains images on the edge of the tabs, but their presence has no effect on the issue. Also, this is for IE 6 on Windows. Thanks, Dave Code:
<html>
<head>
<style>
body
{
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size:11px; /* with this line, extra space appears */
}
.tab_off
{
height:17px;
overflow:hidden;
cursor:hand;
}
.tab_off_text
{
background:#ACA899;
height:15px;
font-size:10px;
border-top:1px solid #aaaaaa;
border-bottom:1px solid #ECECEC;
padding-left:4px;
padding-right:4px;
vertical-align:middle;
}
.tabbed_panel
{
background:#ECE9D8;
border-left:1px solid #666666;
border-bottom:1px solid #666666;
border-right:1px solid #666666;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="pnlTabs">
<span class="tab_off">
<span class="tab_off_text">Tab One</span>
</span>
</div>
<div id="pnlContent" class="tabbed_panel"></div>
</body>
</html>
Go to this page in Firefox 1.5, and view the post titled "The Definition of a Know-it-All". Notice that the first letter of this post does not line up with the second line as it should. The line itself has moved one or two pixels up. This bug appears to be triggered by these factors (all must be present):
Firefox 1.5
First letter is floated
First letter is "I"
Paragraph is two lines long
Browser is in Standards mode
It looks fine in 1.0.7. It looks fine when the letter is not "I". It looks fine if the paragraph is longer than two lines. And it looks fine if you disable the DOCTYPE tag! What could be causing this? And is there a workaround I could use? |
|||||||