|
CSS - Ie Box Model, Display:none And Overflowing Text
Damnit. Differing browser box models piss me off. I guess thats what you get for being a web developer, where someone can use 6+ different programs to run your code.
I just started doing design with divs instead of tables and man what a PITA. I really like the idea of "building blocks" tho (and I really hate the inflexibility of tables), so I'm trying to grind through it. Its a small project, however, so I havent really been able to test cross-browser compatibility too much. I'm running into a strange error in IE (sidenote: the page does seem to be handled correctly in Opera (though Firefox jacks the page up totally)). Anyways, I have a series of nested divs (to emulate the structure of a table). Everything looks fine until I start messing around with divs with a display of 'none'. When I insert a div (or set a current div's) with display = 'none', part of the form input text will "flow over" outside of the div. In the pictured example, "Zachary Wedgeworth" is the last entry in the selectbox. There is no code / html after that selectbox, but as you can see, "Wedgeworth" appears after it! It isnt even able to be highlighted! The second line of the form contains a div with style='display:none'. If there's no div containing anything to do with display, this "overflow" error doesnt occur. There should be no difference in inserting a non-displayed div vs. never putting the div in the code at all, but (in IE at least), there is. stupid & frustrating. Has anyone run into this problem or have any idea why this might be occuring? Its already stumped a couple fellow programmers. Similar TutorialsHi, I am having a strange issue with my new site code . I am experimenting with a new look and decided to go with all css, no tables look. I have a div where the enteries go. I entered some random text to see how it looks. To my surprise in Mozilla 1.7.10 the text overflows from the entry div into the other one while it works fine in Internet Explorer ( the post box expands automatically to fit all the text). Second the in the commentsarea div, why is the "comments(1) floating in the middle of the entry box instead of the bottm right ? here is the code in question Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kashif Khan" />
<style type = "text/css" media="screen">
body
{
background-color:#A2C257;
color: #333;
padding:0;
margin:0;
font: 90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
#page
{
text-align: left;
margin: 20px auto;
padding: 0px;
width: 800px;
background-color:#A2C257;
}
#header
{
height:105px;
margin-bottom: -1px;
background: url("url13.jpg") no-repeat top center;
}
.entry
{
border: 1px solid #FF4500;
background-color:white;
height:200px;
margin:15px 0px;
padding: 15px 20px 20px 20px;
}
#menuarea
{
padding:0px;
margin:0px;
font:90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
}
#menuarea #navbar
{
text-align:center;
padding-bottom:5px;
padding-top:5px;
padding-left:0px;
margin-top:0px;
margin-left:0px;
background-color:#white;
color:white;
line-height: 18px;
margin: auto;
width:100%;
}
#navbar
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin: 0px 0px;
}
#navbar a
{
color:white;
}
#navbar li
{
display:inline;
padding: 5px 0px 5px 0px;
}
#navbar li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration:none;
border-right: 1px solid #fff;
}
.center
{
text-align:center;
}
p img
{
padding: 0;
max-width: 100%;
}
a
{
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
a img
{
border:none;
}
.commentsarea
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin:0px 0px ;
}
</style>
</head>
<body>
<div id = "page">
<div id = "header">
</div>
<div id="menuarea">
<ul id="navbar">
<li><a href="">Root</a></li>
<li><a href="archive.php">Archive</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="mailme.php">Email Me</a></li>
<li><a href="http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://kashif.f2o.org/xml.gif" align="middle" border="0"/></a></li>
<li><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://feeds.feedburner.com/kashiflocalhost/root&tt=CENTRALDIRECTORY&ru=http://rss.msn.com'"><img src="http://sc.msn.com/c/rss/rss_mymsn.gif" alt="" style="border:0"/></a></li>
<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://www.bloglines.com/images/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" /></a></li>
<li ><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="91" height="17" border="0" align="middle" alt="Add to My Yahoo!"></a></li>
</ul>
</div>
<div class = "entry">
Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go. 2
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.3
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.4
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.5
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.6
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.7
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
</div>
</body>
</html>
Thanks Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know. Hi, I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text. The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text. I tried using overflow: visible but this didn't change anything. Thanks for any help. I have nested tables and when an inner table has margin-left: 50px and width: 100%, the inner table overflows the outer table. The problem occurs with IE6 and Opera 7 (didn't test with Opera 8). Here is the code: Code: <style type="text/css">
table.cmnt
{
border-collapse: collapse;
margin-top: 8px;
border: 1px solid black;
width:100%;
text-align: left;
background-color: #EEEEEE;
}
</style>
<table border="1" width="70%" cellpadding="7">
<tr>
<td>
<table class="cmnt" cellpadding="3">
<tr>
<th>
Title
</th>
</tr>
<tr>
<td>
Text
</td>
</tr>
</table>
<table class="cmnt" style="margin-left: 50px;" cellpadding="3">
<tr>
<th>
Title
</th>
</tr>
<tr>
<td>
Text
</td>
</tr>
</table>
</td>
</tr>
</table>
Correct rendering with Firefox: Incorrect rendering with IE: (the images are cropped) Any ideas how to fix this? I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
First off, here is the url to the page I am working on: http://chaos.ramdu.net/projects/new_design/test.html And the code: Code:
<HTML>
<BODY STYLE="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; font-family: Georgia; background-color: #F0F0F0;">
<DIV STYLE="margin-left: -300px; left: 50%; width: 600px; background-color: #FFFFFF; border-left: 1px solid #707070; border-right: 1px solid #707070; position: absolute;">
<DIV STYLE="margin-left: 10px; padding-bottom: 20px; width: 578px; background-color: #6A90AB; border-left: 1px solid #707070; border-right: 1px solid #707070;">
<DIV STYLE="height: 10px; font-size: 0pt;">
</DIV>
<DIV STYLE="margin-left: -50px; width: 700px; height: 120px; background-color: #FFFFFF; border: 1px solid #707070; position: relative;">
test
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
The page renders as thought in FireFox, but in IE, the DIV containers expand to the width of the white DIV. I want the page to render in IE exactly as it does in FireFox, but I am at a loss to try and do it. Hey it's a Friday night and I'm having the worst problems with IE. My page looks ok in FF and Safari but in IE the body is overflowing by like 350px or so. I don't know why it's doing this. I've used my Firebug but it doesn't really style that overflow section. It's like a ghost section. Doc type is XHTML strict, here's the pertinent CSS. Thanks for any help you can offer. This is kind of ruining my friday night. Code:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, Sans-Serif;
background: #000 url('img/mainbg.jpg') top left repeat-x;
text-align: center;
width: 100%;
padding: 0;
margin:0;
height: 1200px;
}
#icontainer {
background-image: url('img/containerbg.jpg');
margin-right: auto;
margin-left: auto;
width: 974px;
height: 1200px;
}
#plain {
background-image: url('img/plainback.jpg');
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
margin-top: 0;
width: 974px;
height: 1200px;
overflow-y: hidden;
}
I am constructing a new website and need help preventing the header text from overflowing. I have tried combinations of overflow:hidden; but does not seem to work. The site is here. Advice on how I can prevent overflow for FFox, IE6/7 appreciated. Hello everyone, I am pretty new to css but have code from various css sites that have used to get the layout i wanted. I am having an issue with IE7. In IE8 and Chrome everything is working like intended. The link to the page in question is philadler.com/dance09.html I have validated the CSS and xhmtl and the page passed both. Can anyone tell my why in IE7 the content is overflowing into the right column, but in the other 2 browsers i have tested it works fine. Also, does anyone know of a good photo gallery. Some of the events i will be putting have hundreds of pictures is there an auto formating or auto coding gallery that will look at the folder of the pictures and at it to the gallery? Thanks for any help Phil Hey it's a Friday night and I'm having the worst problems with IE. My page looks ok in FF and Safari but in IE the body is overflowing by like 350px or so. I don't know why it's doing this. I've used my Firebug but it doesn't really style that overflow section. It's like a ghost section. Doc type is XHTML strict, here's the pertinent CSS. Thanks for any help you can offer. This is kind of ruining my friday night. Code:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, Sans-Serif;
background: #000 url('img/mainbg.jpg') top left repeat-x;
text-align: center;
width: 100%;
padding: 0;
margin:0;
height: 1200px;
}
#icontainer {
background-image: url('img/containerbg.jpg');
margin-right: auto;
margin-left: auto;
width: 974px;
height: 1200px;
}
#plain {
background-image: url('img/plainback.jpg');
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
margin-top: 0;
width: 974px;
height: 1200px;
overflow-y: hidden;
}
Hi, I am really stuck and need some help. I have created an alphabet of links across the top of a page. The mark up is like this; <div id="alphabet"> <a href="#">a</a> <a href="#">b</a> ... </div> Along with an Eric Meyer reset.css stylesheet it has the following CSS applied; #alphabet{ width: 940px; margin: 0 auto;} #alphabet a { text-decoration: none; color: #757575; font-size: 20px; margin: 5px 5px; padding: 5px 5px; border: 1px dashed #757575;} #alphabet a:hover { color: #333; border: 1px solid #333; } #alphabet a.current-letter{ background: #545353; color: #ffe224; font-weight:600;} The problem I have is that the #alphabet container only has the height of links' text. It does not included the padding, margin or border. Therefore if I apply a background to #alphabet the links' top and bottom borders appear outside of the div. I have tried adding overflow: hidden/auto but that only resulted in making the bit outside the div disappear. Anyone got any ideas??? Thanks in advance On the this page you will notice the ASDF overflowing into the footer if you resize the page to 1024x768 size. I'm trying to keep the footer on the bottom but the content still seems to creep into the footer? Any ideas? This only happens in IE 6 and 7, FF seems to handle it just fine. I w3c checked everything, html is good to go, css has some warnings but nothing that I seem to have to worry about. Any help is greatly appreciated. I'm kinda new to css and trying to do this layout with CSS looks ok it IE but I cant get Netscape containers to expand. http://countrystampinangel.com/test.html http://countrystampinangel.com/test.css I'm having a problems with a form overflowing it's containing div Link removed The html: Code:
<div id="mainbody">
<h2>Manage Double rooms by day</h2>
<br/>
<form name="list" id = "calendarmonth" action="" method="post">
....
</form>
<form name="list" id="#updatedays" action="updatewebroomdays.php" method="post">
...
</form>
</div>
Code: #mainbody {
padding:0;
margin: 4em;
position:relative;
}
#content {
position:relative;
background-color:#ffffff;
margin-top: -1em;
}
I can fix it buy adding another div around the containting div, like this Code: <div id="content">
<div id="mainbody">
<h2>Manage Double rooms by day</h2>
<br/>
<form name="list" id = "calendarmonth" action="" method="post">
....
</form>
<form name="list" id="#updatedays" action="updatewebroomdays.php" method="post">
...
</form>
</div>
</div>
.... but I don't know why this fixes it and what I'm doing wrong... Thanks James If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke I am creating a variation on the son of suckerfish drop down menu - I would post a link to that code but the forum wont allow me so please use google :-( Anyway the basic idea is to display a drop down with a series of links which are floated from left to right. I have tweaked the code and it works nicely in IE 8, FF 3 (os x and xp) and safari3 but I have a minor problem in IE 7 (I haven't dared look at IE 6 yet!) Basically the drop down is appearing too far off to the right in IE 7. I can fix it by using a conditional margin-left: -4.5em but this seems like a hack and i don't know how well it will work across different resolutions. If someone could give me some pointers on this I would appreciate it :-) You can see the code in action at www esuri-apartment.com/css_menu/index.html (apologies for the formatting but i'm blocked from posting urls which is a serious pain!) Many thanks! Toby Here is the code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
<title>
Insert title here
</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Menswear</a>
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Accesories</a></li>
<li><a href="#">Suits</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Accesories</a></li>
<li><a href="#">Suits</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Accesories</a></li>
<li><a href="#">Suits</a></li>
</ul>
</li>
</ul>
</body>
</html>
menu.css: Code: #nav, #nav ul {
padding: 0 20px;
margin: 0 0 1em;
list-style: none;
width:36em;
float:left;
font-size:1.1em;
}
#nav li {
float: left;
background-color:red;
text-align:center;
padding:0;
width:10em;
}
#nav li a {
display:block;
padding:0.25em 2em;
text-decoration:none;
width:6em;
}
#nav li ul {
position: absolute;
width: 40em;
height:10em;
left: -999em;
/* This appears to fix the problem in IE 7 but i dont like it
* margin-left: -4.53em; */
border:1px solid black;
padding-bottom:2em;
}
#nav li li {
background-color:white;
width: auto;
}
#nav li li a {
padding: 0.5em 0.5em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav ul ul {
border: none;
float:left;
}
#nav li ul li ul {
height:1em;
width: 6em;
}
menu.js (hack for ie): Code: sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Situation Hi everyone. I'm trying to make an <img> hangover the right side of a <div> so half is inside and half outside. I'm applying a float with negative margins. Problem The problem is ie6 keeps cutting off the half that's suppose to be outside. Solution? Does anyone know how I can accomplish my situation in ie6? Also, I'm interested in learning the IE6 CSS Model. Can anyone point me to where I can learn exactly how it works? Thank you. I just thought I'd have a rant and see who agreed and disagrees with me. Please feel free to voice opinions on both sides. *RANT STARTS HERE* What the hell were they thinking when they decided on the box model. Sure, every element is in a box, I'm ok with that. But what's the go with how margin and padding styles are handled. Which moron decided that the size of the box would change depending on whether it had a border, a margin or padding? This one **** up in the standards has got to be the number one problem with using css for layouts. It flys in the face of common sense. i've got 800 pixels to work with, you'd think defining 2 boxes with width 400px or 50% would give you 2 boxes that would fit in the page, right? WRONG! Add a margin, padding or border to your box and they become too large to fit. This makes percentage width specifications become near useless and pixel specifications a pain in the *** to work out. If my boxes have anything specified in percentage then I've got no way to figure out how wide they are, I guess I'll make their width's 49% and hope for the best. If my boxes need to be 400 pixels wide but they have 5 pixels of padding and a 2 pixel border. Therefore they'll need to be 400 - 2 * 5 - 2 * 2 pixels wide. Does this appear to suck to anyone but me? Surely nesting all padding, border and margins inside the box would have been a far more sensible solution? Can anyone come with a reason for why they chose the current standard? Hi, I'm new so please be gentle! I'd really really appreciate any words of advice regarding the box model hack in IE6. I was under the impression that the box model is rendered correctly if the browser is operating in Standards mode. I have a very simple example where I have created two divisions. One with no hack and one with the hack. The code is as follows: Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Box Model Hack in IE 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html>body .content {
width:400px;
}
div.content {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}
div.contentHack {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
</style>
</head>
<body>
<div class="content">Box model</div>
<div class="contentHack">With box model hack</div>
</body>
</html>
The example can be found at http://www.greeno76.com/validate/box.html In IE6. the boxes are different sizes (The hack one is larger). I would have expected them to be the same size. Can anyone explain this? Also, I have read that I need to remove the Code: <?xml version="1.0" encoding="iso-8859-1"?> statement otherwise IE remains in Quirks mode. I have done this on the following URL: http://www.greeno76.com/validate/boxNoUTF.html The boxes are still different sizes but are larger than the ones with the encoding statement. Can anyone help me with this? Have I missed something glaringly obvious? Any advice would be gratefully received. - Jason Alrite, Im having a little trouble hiding text and then showing the text only on the printout of the page. Here is what I have so far: Setting up Style tags: PHP Code: <style type="text/CSS"> #inc { display:none; //hides text on page } </style> <style type="text/CSS" media="print"> #omit { display:none; //hides text on printout } </style> ... that bit works fine, it is this bit I am struggling with, how do I write the following: PHP Code: <style type="text/CSS" media="print"> #inc { display:??? what goes here ???; //show text on printout } </style> ... here is the #inc being called: PHP Code: <span id="inc"> <font face="Arial" size="3" color="#000000">Text </span> ... so the #inc is called to hide the text on the page but displays text on printout. Am I going in the right direction??? Thanks Nick |
|||||||