|
CSS - Left Margin Pushes Everything Causing Horizontal Scroll
Hello,
I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll. I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail. I am stuck. Any ideas on how to negate the pussing of a margin? Similar TutorialsI 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;
}
So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code:
div#footer {
position: relative;
height: 25px;
width: 100%;
}
span#left-bg {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat 0 0;
z-index: -1;
}
span#left-bg {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat -400px 0;
z-index: -1;
}
in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFD2;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#ffffd2;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}
a.blue {
color:#0000CC;
font-size:11px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
position:absolute;
top:6px;
left:14px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
position:absolute;
top:0px;
left:0px;
width:100%;
height:137px;
background-color:#A4AA54;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
position:absolute;
top: 175px;
left: 185px;
width: 81%;
padding:15px;
border: 0px solid #000000;
background-color:#ffffd2;
z-index:0;
}
body>#Content {width:81%;}
#Menu {
position:absolute;
top: 166px;
left:0px;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A4AA54;
border-top:0px solid #A4AA54;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and the other Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar
.clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF Thanks for taking the time to read my question. I have a container that is floated left. I've put a margin-left: 80px; on it. the 80px seems to be quite a bit bigger in IE(6) than in FF. The page works well in FF but craps out in IE. I can't figure out what's going on here. In my body{} I have margin: 0px; and padding: 0px; Any ideas? Brad Thanks for taking the time to read my question. I FF v.2 and IE v.7 In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"]. HTML: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
<div class="LeftNavMainIn">
<div class="LeftNavContentTitle">
Select category below to view available inventory
</div>
<div class="LeftNavContentHolder">
<div class="LeftNavContent">
<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
</div>
<div class="LeftNavContent">
<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
</div>
</div>
</div>
</div>
<div class="ItemListMain">
<div class="ItemListTitle" id="ListOfItemTitles"></div>
<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
<div class="ItemListContent" id="ListOfStuff"></div>
<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}
.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top left;
}
.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;
width: 100%;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top right;
}
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
}
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}
.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}
.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left;
width: 180px;
}
.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}
.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;
}
.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}
.CoverPictures {
width: 150px;
height: 150px;
}
.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}
.ItemDetailsArtist {
float: left;
width: 100%;
}
.ItemDetailsTitle {
float: left;
width: 100%;
}
.ItemDetailsType {
float: left;
width: 100%;
}
.ItemDetailsCost {
float: left;
width: 100%;
}
.ItemDetailsWidescreen {
float: left;
width: 100%;
}
.ItemDetailsActors {
float: left;
width: 100%;
}
.ItemDetailsRating {
float: left;
width: 100%;
}
img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}
.roundtop {
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.roundbottom {
background: url('BottomRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.Nav {
display: block;
width: 100%;
}
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}
a.Nav:link {
color: #000000;
text-decoration: none;
}
a.Nav:visited {
color: #000000;
text-decoration: none;
}
a.Nav:hover {
color: #000000;
text-decoration: underline;
background-color: #0066FF;
}
a.Nav:active {
color: #000000;
text-decoration: none;
}
a.ListStuff:link {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:visited {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:hover {
color: #ffffff;
text-decoration: underline;
background-color:#0066FF;
}
a.ListStuff:active {
color: #ffffff;
text-decoration: none;
}
JS: Code: var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
TheCDTitles=''
TheDVDTitles=''
document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
if (FrameName=='CD') {
for (x in itemsArray)
{
TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
}
if (FrameName=='DVD') {
for (x in itemsArrayDVD)
{
TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
}
}
//*******************CD******************************
var itemsArray=new Array();
var x
function createArray()
{
x=0
var data=getCDContents();
var items=data.split('\n'); //splits the data in retreived from getContents() by line
var stats;
for (var i=0; i<items.length; i++)
{
x++
stats=items[i].split(','); //This is the line that determines what separates values in a line
itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrame=document.getElementById('CDIFrame');
var INdata="";
if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdata);
}
function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}
//*******************DVD******************************
var itemsArrayDVD=new Array();
function createArrayDVD()
{
var dataDVD=getCDContentsDVD();
var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
var statsDVD;
for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
{
statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrameDVD=document.getElementById('DVDIFrame');
var INdataDVD="";
if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdataDVD);
}
function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;
}
}
text doc for the CD iFrame Save this as CD.txt in the local folder Quote: 3 Doors Down,Away From The Sun,Rock,$5.00 3 Doors Down,The Better Life,Rock,$5.00 Adema,Insomniac's Dream,Rock,$5.00 Aerosmith,Get A Grip,Rock,$5.00 AFI,Sing The Sorrow,Rock,$5.00 Alice In Chains,self titled,Rock,$5.00 Alice In Chains,Dirt,Rock,$5.00 Alien Ant Farm,ANThology,Rock,$5.00 Thanks so much. Brad Hi, I have this attributes left:504px; to align my picture but margin:0 0 0 387px; can be use as well. Whats the best thing to use? Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here mactyler.com/NEWIDF/ Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7. iphonedevforums.com/news/index.php I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions. Greetings! Please, take a look at http://147.32.113.143/biotest/Sourc...SectionId=10000. Almost everything is ok, except one thing: in left menu (TOC), margin-left is not applied on <a> elements in <li> (menu items - red bordered) in IE 6.0. In FF, everything is OK, but what's much more interesting, in IE 5.5 it works too. So the only problematic browser stays IE 6.0. Could anybody tell me please why this happens? So far, margin-rules worked well for me, even in IE. P.S.: The discussed rule is in Web_Toc.css Hey there I have a small IE6 problem where my "boxR" margin-left positioned div is moving more away from left than expected but works perfectly fine in FF. 3px more to the left to be exact. This is happening to my "boxL" div also (but only 1px more to the left than expected) CSS: Code: .bigBox {background-color:#eeeeee; width:800px; clear:both;}
.leftCol {width:240px; float:left; position:relative; display:block; background-color:tan;}
.rightCol {width:560px; float:left; position:relative; display:block; background-color:lightBlue;}
.boxL {width:230px; margin-left:7px; margin-top:5px; position:relative; display:block;}
.boxR {width:550px; margin-left:3px; margin-top:5px; position:relative; display:block;}
HTML: Code: <table class="bigBox" border="0" cellpadding="0" cellspacing="0"> <tr><td valign="top"> <div class="leftCol"> <div class="boxL">Content Goes Here...</div> </div> <div class="rightCol"> <div class="boxR">Content Goes Here...</div> </div> </td></tr> </table> Pictures of problem: FF: IE6: The 2 blue boxes are "boxL" and boxR" The background color "Tan" and "lightBlue" is the "leftCol" and rightCol" divs See how the "boxL" div has moved left 1px more and the boxR has moved 3px more to the left in IE6... how can i fix this? Thanks heaps Can't figure out why. I validated with W3 and everything was fine. I want p. leftmargin to be left indented 332px. Its just a single column site, should be easy...... This is the CSS Code: p. leftmargin {
margin-left: 332px;
}
#content {
text-align:left;
float:right;
width: 713px;
padding: 0px 17px 20px 30px;
background-color: #B11626;
height: 1100px;
}
this is the HTML Code: <div id='content'> <p class="leftmargin"> <h2> COMING SOON </h2> </p> </div> page can also be found he http://www.kdpatton.com/cosmopolis/program.htm I have a collection of floating divs contained inside a container div. The floating divs are generated dynamically so they could number from one to whatever. The problem I'm having is that when there are too many floating divs, the container elements width is exceeded and the remaing floating divs display below the rest. How can i make the container div expand infinitely depending on it's content? I tried using the overflow properties but didn't have any luck plus such a solution looks ugly in my app. Thanks for any help you can give me. I'm modifying the following style now; http://www.phpbb.com/styles/forum/index.php?style=218. I like this style for variety of reasons, but there is one problem. IE keeps showing horizontal scroll bar no matter what width the window has. How can I fix this problem? I've a menu bar that's a horizontally displayed list (i.e. set up with the following values: ul{ margin-top:5px; margin-bottom:5px; margin-left:0px; } li.inline { display:inline; padding-left:5px; padding-right:5px; border-left:1px solid #fff; } Contained in the following code: <div id="mainNav"> <UL> <li class="first"><a href="../about/index.html">About</a></li> <li class="inline"><a href="../contact/index.html">Contact</a></li> <li class="inline"><a href="../services/index.html">Services</a></li> <li class="inline"><a href="index.html">Portfolio</a></li> </UL> On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element. Is there a way to get both Firefox and IE to have no padding? Thanks </div> Hi guys. I am building a website where some pages are long (and the slidebar appears) and others are short (so the slidebar doesnt appear) The problem is that the page is centered and when the slidebar appears, the page moves a bit to the left. I could set the left-margin to X pixels but then it wont work as expected with different resolutions. Is there anyway to solve this problem? Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me... I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem.... check it out.. http://centralfloridacomputerrepair.com/test.php the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page. the css is here http://centralfloridacomputerrepair.com/style.css (what you are looking at is div#sidetext) and the css/xhtml validates http://validator.w3.org/check?verbo...ir.com/test.php http://jigsaw.w3.org/css-validator/...ir.com/test.php I just can't figure it out... I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either... it gets to the right place horizontally.. but not vertically... I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way. any ideas? edit: I've been here a whole year... and this is my first post. HA. The following script has been validated and is working fine (not in IE/Win): body { margin-top:5px; margin-bottom:5px; padding:0; background:#ccffff; } a { text-decoration: none; } a:link { color: #0000ff; } a:visited { color: #33cc00; } t{line-height:36px;} #wrap { width:613px; left:50%; margin-left:-336px; background:#ffffff; margin-left:auto; margin-right:auto; } #sidebar { position:absolute; float:left; width:150px; border: 1px solid #000033; padding:15px; background:#ffffff; height:650px; z-index:1; } #main { float:right; width:390px; border: 1px solid #000033; overflow: auto; font-family: "Times New Roman", serif; font-size:13px; text-align:left; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; background:#ffffff; background-repeat:no-repeat; background-position:66% 540px; background-image:url(smalljester.jpg); height:750px; overflow:auto; z-index:2; } I'm still trying to figure out why it works. In particular, there are two margin-left tags in the #wrap div, one is -336 px and the other auto. I seem to remember this had to do with centering the layout (the negative margin) but how is it valid with two margin-left properties? TIA [I'd post the html from the dozen or so pages this is working on but there are too many urls.] You can view the site I'm working on here and the style sheet here . The #left and #right divs inside the container are set up so that a 15px margin should exist all the way around the outside as well as between the two divs. This is the white space that you can see. From what I can tell, it displays correctly in Firefox, Opera and IE7, but not in IE6 or below. In IE6, which I test in using VirtualPC, the left-margin of the #left div seems to double and become 30px wide. This pushes the #right div all the way out to the edge of the container, though you can't see this happening because the background of #right is transparent. I have spent the last hour looking at my css trying to figure out why IE6 is doubling the width of this margin, but I'm completely baffled. I'm convinced there's something obvious I'm missing because I'm a bit of a css amateur. Can anyone help? No worries, made an obvious error. Please delete this =) ( sorry for waste of moderators time ) Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. |
|||||||