|
CSS - Css Alignment Error In Ie6
For those of you using BETA IE7 you will not see this error, which makes me believe that it is just IE6 being retarded.
But because there are very few out there viewing sites with IE7 I have a problem. becuase I cannot post the code, unless you want my entire stylesheet and all my source, because I literally have no idea what is causing this error, but I will post the code relating to it. http://www.unlimitedgamer.net/area51/ this is a beta page for the layout I am working on, if you scroll down you will see the news becomes gradually more and more distorted, the site is 100% valid, I just ran it through the w3.org validator. code relating to problem HTML Code: <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div class="maincol" > /////////////////////////ONE OF THE NEWS POST////////// <div class="entry"> <div class="entrydate"> <div class="entrymonth">February<br /> 2006</div> <div class="entrynumber">23</div> </div> <div class="entrytitle"> <h1 id="post-215">[<span class="comment_color">2</span>] <a href="http://www.unlimitedgamer.net/23/the-focus-on-black/" rel="bookmark" title="Permanent Link: The Focus on Black">The Focus on Black</a> - <i>Death God</i></h1> </div> <div class="entrybody"> <p>TEXT TEXT </p> <div class="news_footer"> <img src="http://www.unlimitedgamer.net/wp-content/themes/gespaa_v2/images/file.gif" title="file" alt="*" /> <a href="http://www.unlimitedgamer.net/category/xbox/" title="View all posts in Xbox" rel="category tag">Xbox</a>, <a href="http://www.unlimitedgamer.net/category/playstation-2/" title="View all posts in Playstation 2" rel="category tag">Playstation 2</a>, <a href="http://www.unlimitedgamer.net/category/black/" title="View all posts in BLACK" rel="category tag">BLACK</a> </div> </div> </div> /////////////////////////END OF THE NEWS POST////////// </div> </div> <div id="leftcol" > <div class="Box"> <h3>Welcome to Unlimited Gamer</h3> <p> TEXT TEXT</p> </div> </div> </div> I only posted one of the news post because the code doesn't change depending on the news post... now for the css of all those classes and ids CSS Code:
#wrapper
{
overflow: hidden;
}
#wrapper
{
float: middle;
float/**/: none;
}
#leftcol{
width:149px;
float:left;
position:relative;
font-size: 8pt;
color: #e16c72 'Lucida Grande',verdana,arial,sans-serif;
text-decoration: none;
}
#twocols{
width:630px;
float:right;
position:relative;
}
.maincol{
background-color: #FFFFFF;
float: left;
font-size: 8.5pt;
position: relative;
width:630px;
}
#maincol{
background-color: #FFFFFF;
float: left;
font-size: 9px;
position: relative;
width:630px;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
/***********************************************************************
* Entry *
***********************************************************************/
.entrybody p, form p, .commentbody p{
margin-top:0px;
margin-left: 0px;
padding-left:0px;
}
h1{
font-size: 24px;
color: #385abe;
}
h2.entrydate {
font-weight: normal;
font-size: 16px;
color: #888;
margin-bottom:3px;
padding-top: 3px;
}
entrytitle {
font-family: "Century Gothic", "Lucida Grande", arial, Tahoma, Verdana,helvetica, sans-serif;
margin:0px;
font-weight: normal;
font-size: 24px;
padding-top: 5px;
}
.entrybody{
color: #424d53;
font-size: 12px;
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 1px dotted #6d6d6f;
padding-left:3px;
padding-top: 5px;
}
I think thats everything, but you really need to see it for yourself to understand the error, it doesn't occur in firefox though :/ thanks for any help. Similar TutorialsHi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks! Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance! Code: <style type="text/css">
body
{
background-image:url('bg-1.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#FFF;
background-attachment:fixed;
}
* {
margin: 0px;
padding: 0px;
}
#wrapper {
height: 1300px;
width: 1000px;
margin:0px auto;
text-align:left;
}
#branding {
height: 228px;
width: 1000px;
}
#branding #logo {
height: 228px;
width: 1000px;
position: relative;
background-image:url('hooplogolarge.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#000000;
}
#siteNav {
height: 38px;
width: 1000px;
color: #FFF;
background-color: #000;
line-height: 38px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
float: none;
text-align: center;
word-spacing: normal;
font-size: 24px;
}
#mainContentWrapper {
float: none;
width: 1000px;
background-color: #FFF;
}
#mainContentWrapper #news {
float: left;
width: 265px;
height: 953px;
background-color:#FFF;
border: thin dashed #000;
padding: 10px;
}
#mainContentWrapper #mainContent {
float: left;
width: 488px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#mainContentWrapper #siteAds {
float: right;
width: 175px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#footer {
width: 1000px;
font-size: 9px;
color: #CCC;
text-align: center;
line-height: 35px;
background-color: #000;
clear: both;
}
</style>
I have a joomla site that i have install joomla with autostand all works fine but when i turn on the slider it mess the hole design up how can i sort this. It also w3c validator show errors after i turn it on. Any help would be great my site here Good day! when i run my webpages in IE8 the alignment was change i don't know why it happens. Before my webpage is fix on my screen but now the scrollbar was visible, which is i don't want to happen...is it css code help me in my problem? I'm trying to figure out why the three titles and info are being listed down. I want them all to be listed across. http://kansasoutlawwrestling.com/champions Hi, I'm having an issue getting my body background image to show a line that runs vertically down the sides. It shows in FF, but it doesn't show the left vertical line in IE or Chrome. The content is covering it up, and anytime I try making the overall width smaller in width, the content background color/area keeps aligning to the left and thus covering up my left border. Doh. Link: http://aries.addaction.net/~copeland/ Another issue is that there's a big gap separating the content from the footer. I think I've had this problem in the past, but unfortunately don't remember how to remedy the issue. I've tried and tried, but keep gettin' denied. Any thoughts on either of these obstacles? Thanks in advance. I love this forum. Hey, First off, please check out: identityrocket.com/website/index.php Notice the huge negative space just above the big orange button in the bottom left corner. I can't get rid of that space or seem to align it properly. I'm getting so frustrated because it is probably something small. Any help would be tremendously appreciated. Thanks, Ian. Hi Guys, I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page. The div that contains the photo, name, and profile edit link is giving me some trouble. Here's a pic of how it is currently Here's what I'm hoping to get. Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented. Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone. Code:
#left_sidebar
{
float: left;
margin: 0 0 .5em .5em;
width: 160px;
}
#left_sidebar_border
{
border: 1px solid #e87b02;
overflow: auto;
height: 100%;
margin: 0em 0em 1em 0em;
}
#left_sidebar_pic
{
margin: .5em .5em .5em .5em;
}
#left_sidebar_name_action_container
{
margin: 0em 0em 0em 0em;
}
#left_sidebar_name_action
{
}
#left_sidebar_name
{
}
<div id="left_sidebar">
<div id="left_sidebar_border">
<div id="left_sidebar_pic">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">
</a>
</div>
<div id="left_sidebar_name_action_container">
<div id="left_sidebar_name">
<span class="mediumboldtext">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
Jason King
</a>
</span>
</div>
<div id="left_sidebar_name_action">
<span class="mediumtext">
<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>
</span>
</div>
</div>
</div>
</div>
I have a container division set at 900px. Within this division are three column, a left, center and right. The left and center division are set to float left and the right one is set to float right. The width of the divisions adds up exactly to 900. This setup displays fine in all IE browsers except IE 6 in which it kicks the right column underneath the center one. What would be causing this??? Here is my css code for the divisions: Code: #homecontain {
width: 900px;
clear:both;
height: auto;
background : #CCEDFE;
}
#leftblend {
float: left;
margin-left: 0px;
margin-top: 0px;
width: 230px;
height: 887px;
background-image:url('Images/LeftBlend.jpg');
}
p.lefttext{
color:#FFFFFF;
text-decoration : none;
font : 10px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
font-style: oblique;
line-height:15pt;
padding-left: 20px;
padding-right: 20px;
width:150px;
}
p.leftheadlisting{
color:#FFFFFF;
text-decoration : none;
font : 12px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
line-height:15pt;
padding-left: 20px;
padding-right: 20px;
width:170px;
}
#center {
float: left;
width: 477px;
height: 887px;
margin-right: 0px;
padding : 0px 0px 0px 0px;
background : #CCEDFE;
}
p.centerheadline{
color:#000000;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
width:430px;
}
p.centertext{
color:#000000;
text-decoration : none;
font : 10px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: normal;
line-height:15pt;
padding-left: 20px;
padding-right: 20px;
width:430px;
}
p.centerbottomline{
color:#0d2781;
text-decoration : none;
font : 16px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
font-style: oblique;
line-height:20pt;
padding-left: 20px;
padding-right: 20px;
width:430px;
}
#rightlogo {
float: right;
width: 193px;
height:887px;
height: auto;
background : #CCFFFF;
margin-top: 0px;
padding : 0px 0px 0px 0px;
}
Any help would be appreciated! my page apears perfectly in safari and mac ie but it incorrectly in pc ie. the div 'container' is centered in safari and mac ie but left aligned in pc ie. here is the css and html that effects it: css: Code: body {
background: repeat-y center url(bgglow.gif);
margin-top:0;
}
#container {
background: no-repeat url(bg.jpg);
width: 788px;
height: 427px;
border: solid;
border-width: 1;
margin-left: auto;
margin-right: auto;
}
#links {
position: absolute;
top: 5px;
width: 180px;
border: solid;
border-width: 1;
}
html: Code: <html>
<body>
<head>
<style type="text/css" title="currentStyle">
@import "style.css";
</style>
</head>
<div id="container">
<div id="links">
...
</div>
<div id="content">
<p>
..
</p>
</div>
</div>
i have attached a screenshot from safari of how it is meant to look, and a screen shot from pc ie. thanks for any help! hi i am trying to position some images in this box... #rightColumn { float: right; padding: 0px; margin:0 12px 0 15px; background: #F2FCFF; width: 350px; } there are 3 images and i wany them to go from left to right accross the box using this tutorial as inspiration. however, rather than use margins to space the images (this screws up what i am trying to achieve) i wanted to use css alignment i.e. leave the first image alone, centre the second and align right the third. I can't figure how to do it though... i've tried a couple of things but i still pretty wet behind the ears so don't have too much experience to draw upon.... i tried <div class="button"><img src="images/school-uniform-button.gif" alt="school uniforms" name="uniform" width="107" height="107" id="uniform"><div class="centre"><img src="images/school-equipment-button.gif" alt="classroom equipment" name="equip" width="107" height="107" id="equip"></div> <div class="jumpmenu"><img src="images/fees-button.jpg" alt="School fees" name="fees" width="107" height="107" id="fees"></div></div> and also with the <div class="button"> next to each image with the alignment divs. neither works and advice would be really appreciated thanks jim. Hello, I have a question about alignment in firefox. The menu i have has some space while it needed to reach the top, like it does in IE. The page you can see on: http://217.115.203.132/dcvtest/ I hope anyone has a solution for me. Thanks in advance. Tim Hi, I have text that is generated from a mysql database and have positioned it over buttons in order to create a menu. However I just thought in other browsers and other computers the text will align differently and therefore appear in random places on the website. Is there any other way to do this? Please explain it simply as I struggle with css at the nest of times. Thanks in advance My page looks great, except in IE 6 where the green header shifts left instead of staying centered. I don't know why!!! It can be viewed at: http://www.descom.org/testing/home.html Roll over "About" and then click on any of its sublinks. The CSS sheets a http://www.descom.org/testing/allianceStyles.css and: http://www.descom.org/testing/ie6.css THANK YOU! |
|||||||