|
CSS - Ie Problem, Box Drops Down.
There are two things I dont like in this world:
1. Internet Explorer 2. 1024x768 Anyway, I have a problem in IE. The problem is that a div is falling down below the other divs. It looks like this: http://files.upl.silentwhisper.net/...8/ieproblem.JPG Works in FF (of course, hehe). Any idea what this might be or any solution? Code:
#box1
{
border-right: 1px solid #a0a0a5;
border-bottom: 1px solid #a0a0a5;
background-color: white;
width: 680px;
height: 440px;
text-align: left;
color: #5b626e;
padding: 15px;
margin-left: 182px;
overflow: auto;
position: absolute;
}
#box1 a:link, #box1 a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0b1a48;
text-decoration: underline;
}
* html #box1 {
float:left;
}
Thats the CSS for the div falling down. Similar TutorialsI'm having a problem in IE6 when I make the browser window narrow so that all the images cannot fit horizontally. The page is at: URL In other browsers Firefox win/mac, Safari, things work ok if I make the browser window narrow so that some of the images in the right section (#section1) will not fit. The images get clipped and a horizontal scroller appears. But in IE6/Win, the whole table of images gets dropped down. I thought the issue was related to: Internet Explorer and the Expanding Box Problem URL But trying overflow:hidden; in #section1 did not help. Any help would be greatly appreciated. Thanks- YamaMon I have some very simple code that has a <div> underneath a <table>. I want the DIV to be up against the bottom of the table with no space. It works fine until I add a <p> tag into the DIV. After doing this, the DIV moves down away from the table. The DIV will contain all the page's content and will automatically adjust it's height to the content. Here's the HTML code (The DIV in question is the "main" DIV): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<center>
<img src="images/header/header1.jpg" alt="Header" width="795" height="170" />
<br />
<table class="headertable" width="795" cellspacing="0" cellpadding="5">
<tr>
<td class="headertd"><a href="1">Link 1</a></td>
<td class="headertd"><a href="2">Link 2</a></td>
<td class="headertd"><a href="3">Link 3</a></td>
<td class="headertd"><a href="4">Link 4</a></td>
<td class="headertd"><a href="5">Link 5</a></td>
<td><a href="6">Link 6</a></td>
</tr>
</table>
</center></div>
<center>
<div class="main">
<p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Main Content</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
</div>
</center>
<center>
<div class="footer">
<span style="float:left;margin-left:5px">Footer Text 1</span>
<span style="float:right;margin-right:5px">Footer Text 2</span></div>
</center>
</body>
</html>
Here's the CSS: Code: @charset "utf-8";
/* CSS Document */
body{
background-color:#E0A766;
}
/* Header Styles */
.header{
width:795px;
margin-left:auto;
margin-right:auto;
}
.headertable{
text-align:center;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#006600;
}
.headertable a:link{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:visited{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:hover{color:#FFFFFF; font-weight:bold; text-decoration:none; background-color:#048E04}
.headertd{
border-right:solid 2px black;
}
/* Main Content Styles */
.main{
width:791px;
padding-bottom:20px;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
/* Footer Styles */
.footer{
width:791px;
height:18px;
padding-top:2px;
padding-bottom:2px;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#006600;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
font-size:12px;
}
.footer a:link{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:visited{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:hover{color:#FFFFFF; font-weight:bold; text-decoration:underline; background-color:#048E04}
I know my code isn't up to current standards/trends (such as using a table for a navbar), but this was the easiest, fastest way to create the layout I wanted, so I would like to keep the current code. I just need to know if it's possible to have the DIV not drop down when it contains a <p> tag. If I take the <p> tag out of the "main" DIV, everything looks fine. Here are a couple screenshots: Here's what it's supposed to look like: http://img193.imageshack.us/img193/617/screen1d.jpg Here's what happens after adding the <p> tag: http://img193.imageshack.us/img193/8934/screen2a.jpg Hi Folks [I don't think my last attempt went through - I made a mistake], I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page; http://johniwhite.com/tests/ireland/level_2.html I'd love to hear the easy answer! Here's the CSS: div#left_level2 { width: 130px; height: 50px; vertical-align: top; padding: 0; margin: 0px; /* display: inline;*/ /* border: 1px solid #0F0;*/ } div#right_level2 { float: right; width: 594px; height: 50px; padding: 0 0 0 0; margin-top: 0px; margin-right: 0px; vertical-align: top; } ---- The code for a more simple version at http://johniwhite.com/tests/ireland/2_col_test.htm <div id="middle"> <div id="right_level2"><!--the floated div for content--></div> <div id="left_level2"><!--the non-floated div for subnav--></div> </div> ---------- Love to hear thoughts, thanks John Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? Hey all, I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems. If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column. This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned. If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first. One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation? Thank you for your time. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. hello ! can someone tell me what i have wrong in CSS i can see it in FF okay, but IE makes me worry : http://www.autobazar.eu/sk/wallpapers2.php thanx for your reply Hey guys. I made a little news script for my site, but if I submit more than 1 news "article" IE doesn't style it. It will style the first article though. In FF everything is fine... If you view it in firefox you will see what im talking about. To see it visit http://www.leetwebmasters.com/beta_site/test2/ Where it says "THIS TEXT SHOULD BE GRAY", that part is the title and everything on that line should be gary, then below it is the news, "meh". Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="container">
<div id="topbanner"><img src="images/topbanner.gif" /></div>
<div id="mainbanner"><img src="images/mainbanner.gif" /></div>
<div id="navbox">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<!-- END NAVBOX -->
</div>
<div id="viewnews">
<?php
include('');
$query = "SELECT * FROM articles LIMIT 4";
$rs = mysql_query($query) or die (mysql_error());
while($row = mysql_fetch_object($rs)) {
print "<div class=\"title\">";
print "Title: ".$row->title ." | Submitted on: ". $row->date . " | Submitted by user: ". $row->submitted_by;
print "</div>";
print "<div class=\"news\">";
print "News submitted:<br /> ".$row->news;
print "</div";
}
?>
</div>
<!-- END CONTAINER -->
</div>
</body>
</html>
CSS: Code:
#container
{
width:950px;
margin:auto auto;
}
#mainbanner
{
clear: both;
}
#viewnews
{
float: right;
width:750px;
height:450px;
}
.title {
float: right;
background-color:#D6D6D6;
width:750px;
height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.news
{
background-color:#F5F5F5;
}
#navigation
{
float: left;
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #828282;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #828282;
border-right: 1px solid #828282;
background-color:#939393;
color:#EDEDED;
text-decoration: none;
}
#navigation li a:hover {
background-color:#AAAAAA;
}
Can someone please help me? I can't figure out what is wrong Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug all i want is a nav column to stick to the left side of the page using the box i created in imageReady to be the background. but i can't get the box to stop tiling when i set it as the bg nor can i get my buttons to align with the box. i've only been using css for a few hours now so sorry if this is a complete noob question. i'm using an external css file but not for displaying images. for some reason i can't get it show them so i've using style snipets in the html file to display the backgrounds. also my css file isn't finished yet so it's still got some unedited syntax from where i copied and pasted. here's the code css - css Code: Original - css Code <style type="text/css"> body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } #header { margin: 20px; padding: 10px; height: 100px; } #left { position: absolute; left: 15px; top: 160px; width: 150px; } #center { top: 0; margin-left: 230px; margin-right: 15px; } #navbox { position: absolute; left: 15px; top: 160px; width: 200px; } A:link { text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; } A:visited { text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; } A:active { text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; } A:hover { text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; cursor: default; h1 {font-family: Arial, Helvetica, sans-serif; color: #000000 } p {font-family: Arial, Helvetica, sans-serif color: #000000 } </style>
html - html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " i had to omitt this cause of the new member link posting rule"> <html> <head> <title>Oblivious Creations</title> <link rel="stylesheet" type="text/css" href="../website.css"/> <style type="text/css"> body { background-image:url(../Images/main_bgimg.gif) } </style> <body> <div id="header"> This is the header </div> <div id="center"> <p>This is the center </p> </div> <div id="left"> <p style="background-image:url(../Images/main_nav_bg.gif)"> </p> </div> </body> </html>
Hi, i have a problem with a layout of a website in IE7 when i open the website first the layout is broken, when i resize the window the layout is how it should be, anyone come accross this before? I am sorry, I can't show the page as an example as it is a clients website. Basically the problem is the box model (I think). In IE the background file loads fine, but in FF it doesn't. It is a box inside a box, inside a box. I have tried body #divname html # divname html > divname and all other selector variants I can think of to no avail. I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images. Hello, I am having a problem with displaying multiple tables within a div container.. I get this problem only for IE as firefox and other browsers show the tables how I want. current code in comments: // div container, width = 80% //while loop // table <table> <tr> <td> //php table values being printed </td> </tr> </table> //end while loop // end div container the table is aligned to the left and should print out the tables with values as long as they exist in the database. The div container which the table sits in is 80% in width. Within Firefox 5 tables are displayed acorss the container from left to right before moving onto the next line. However in IE it displays all the tables in a long line from left to right and overflowing off to the right ignoring the container parameter. any hep would be much appreciated Thanks Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple CSS code is Code: #css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}
and I have just added this line in my .php page Code: <div id="mybio"></div> What can be the problem?? I have the following CSS document: http://wzpr.net/v3/style.css It is used in practice he http://wzpr.net/ I have two problems with it and if anyone adept with CSS could help me out here, it would be very much appreciated. 1) It passes validation without any problems, and works exactly as I want it to in Firefox - however, as you could probably see coming a mile off, it's completely off in Internet Explorer, as you will see if you try it out. 2) The menu bar on the left is set to 100% height as seen in the CSS. I have applied the workaround hack of setting a container around it to 100% height also (I think!) but still no cigar. Anyone nice enough to help? It'll be great to help me master css. Thanks in advance, Edd. In IE6 my page is not lining up like it is supposed to. The left navigation is not sitting flush against the footer or main content DIV. I have tried a clearing DIV after the main content, but still can't get it to stay flush against the footer. It looks fine in IE7, FireFox, and Safari. Can anyone help me with this?? I would appreciate it! Here is my CSS code Code: body {
background-image: url(../images/bgs/bg_try_02.jpg);
background-repeat: repeat;
margin-top: 0px;
margin-bottom: 0px;
}
.container {
background: transparent;
width: 1000px;
padding-top: 0px;
margin: 0px auto;
}
.banner {
background: url(../images/banner.jpg);
height: 245px;
width: 1000px;
margin: 2px auto 4px;
padding-bottom: 0px;
padding-top: 0px;
}
.left_col {
background: url(../images/bgs/left_col_bg_03.jpg) repeat-y;
float: left;
height: 623px;
width: 200px;
margin: 1px auto 0px;
padding: 1px 0px 0px;
}
.pipe {
background: url(../images/bgs/images/pipe_bg_03.jpg) repeat-y center;
text-align: center;
height: 622px;
width: 200px;
margin: 0px auto;
padding-bottom: 2px;
}
.right_col {
background: #FFFFFF;
float: right;
width: 786px;
height: 620px;
padding: 1px 9px 2px 5px;
margin: 1px 0px 0px;
}
.footer {
background: url(../images/bgs/footer_02.jpg) repeat-x;
padding-bottom: 15px;
margin: 0px auto;
padding-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
height: 75px;
clear: both;
}
.border_2 {
background: url(../images/bgs/border2.gif) repeat-x;
height: 14px;
}
.clearfix {
clear: both;
visibility: hidden;
font-size: 1px;
line-height: 0px;
height: 0px;
}
.border_1 {
background: url(../images/bgs/border1.gif) repeat-x;
height: 14px;
}
.bg_color {
background: url(../images/bg_color_02.jpg) repeat-x;
height: 768px;
}
.bus_border {
background: url(../images/bgs/border2.gif) repeat-x;
height: 14px;
width: 140px;
}
.floatright {
float: right;
margin: 4px;
clear: right;
}
.btn1 {
background: url(../images/btns/left_bg_nav.jpg);
height: 65px;
width: 200px;
}
.btn2 {
background: url(../images/btns/left_bg_nav.jpg);
height: 65px;
width: 200px;
}
.btn3 {
background: url(../images/btns/left_bg_nav.jpg);
height: 65px;
width: 200px;
}
So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks http://www.refinethetaste.com/html/ My website displayed fine with internet explorer 7 and Firefox. But so many errors with IE 8. Is it my codes or IE8? |
|||||||