|
CSS - Width Containment Prob Using Laptops.
Noted only on certain laptops is a quirk causing the rt floated column (body) to be shifted below the lf float...basically a glitch in the width dimensioning.
The first time I noticed it it happened to be one of the wide format DELL laptops using IE thus figuring it had something to do with the non-4x3 ratio. But, I just saw it again yesterday on a run-of-the-mill Compaq. While this instance was noted using IE they also had Netscape installed and it exhibited no crowding problem allowing the webpage to view properly. The following link is directed to a page known to exhibit that quirk on select laptops - http://www.solidgroundnc.com/the_band/bio_band.htm I know trying to use pixel values is a bit on the I-beg-to-be-frustrated side of life. ;-) Using percentages I never achieved my expected results and reducing pixel width to build breathing room was hampered by its cumulative effect on the sub-nav list. I was goaded to use percentages for that list, and I really wanted too, but it never seemed successful. Any insight, if anyone can even duplicate the symptom, would be greatly appreciated. Regards, Golem2 Similar TutorialsHello, I have used the containment hack in several of my projects. However I found examples where they use "<div style="clear:both"></div>". The result is the same. So which one should I use? PHP Code: body { margin: 0px; font-family: Tahoma; font-size: 10px; background-color: #777; } #bodywrapper { margin-left: auto; margin-right: auto; width: 750px; background-color: #FFF; } #logo { margin-left: 15px; margin-top: 7px; margin-bottom: 7px; } .image { display: block; } .topnav { float: right; margin-top: 25px; background-image: url( images/line.gif ); } #left { float: left; width: 180px; background-color: #ccc; } #right { float: right; width: 180px; background-color: #ccc; } #center { margin-left: 190px; margin-right: 190px; background-color: #ccc; } #clear { clear: both; } #contentwrapper { margin: 0px; } PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-us" /> <link href="/css/layout.css" type="text/css" rel="stylesheet" media="all" /> <title>Petroleum Listing Service</title> </head> <body> <div id="bodywrapper"> <div id="header"> <div class="topnav"> image image image </div> <div id="logo"> <img class="image" src="images/logo.gif" /> </div> </div> <div id="contentwrapper"> <div id="left"> left </div> <div id="right"> right </div> <div id="center"> center </div> <div id="clear"></div> </div> <div id="footer"> </div> </div> </body> </html> The problem I am having is it seems that FF starts rendering the white background only once the image is placed...it doesn't count the margin above it as content I assume... IE however does what I want it to do...renders the margin above the image as content, and thus the white background starts at the very top of the page, thus a white margin between the top of the page and the logo. How do I rectify the problem? I understand that FF is probably doing it right...but how do I make FF also start the white background at the top. Hi, this would be my first post. I've been using CSS for about 6-7 months now, and I always find that IE is difficult. Below is the CSS I am using: Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 72.5%;
font-family: tahoma, sans-serif;
background: url(bricks.png) repeat;
bakground-attachment: fixed;
color: #FEEFA2;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: #090;
text-decoration: none;
}
a:visited{
color: #FEEFA2;
text-decoration: underline;
}
p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: #FEEFA2;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: url("bricks.png")repeat #222;
background-attachment: fixed;
min-width: 720px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 0px 0px 0px 0px;
padding-top: 10px;
padding-bottom: 0px;
}
#main-content {
background: url("") repeat-y #4B4214;
padding-left: 230px;
padding-right: 230px;
padding-top: 20px;
border-right: 1px solid #000;
width: 45%;
margin-left: 10%;
}
#header {
width: 82%;
margin: 0% 0% 0% 10%;
background: #342E0E;
text-align: center;
font-size: 1em;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 150px;
padding-top: 20px;
font-size: 1em;
}
#footer {
background: #342E0E;
margin-left: 10%;
width: 82%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
The problem lies with the left-sidebar div. Here is my 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MythScape: The Hub for the Paranormal & Mythological</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="fav.png">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript">
function cacherVoir(theDIV){
leStyle = document.getElementById(theDIV).style ;
if(leStyle.display == "block") {
leStyle.display = "none";
}
else{
leStyle.display = "block";
}
}
</script>
<meta name="verify-v1" content="LiYZqvPLQLMOR/3+Stk2cMxWr2l80SisI86GjbuNmLU=" >
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<?php
include "button.php";
?><br/>
MythScape -v. 1.5-!
</div>
<div style="clear:both;"></div>
<div id="left-sidebar">
<p>
<?php if (!isset($_COOKIE['loggedin'])) {
$link_reg = '<a href="user_login.php">Register</a><br/>';
echo("You are not logged in!<br/>");
include "log.php";
echo $link_reg;
}
else{
$link_logout = '<a href="logou.php">Logout</a><br/>';
$change = '<a href="changepage.php">Change Password</a><br/>';
$mysite_username = $_COOKIE['mysite_username'];
echo ("Welcome, $mysite_username. <br/>");
include "access.php";
echo $change;
echo $link_logout;
}
?>
<a href="http://mythscape.freezoka.com/wiki//index.php?MythScapeMainPage" target="_blank">Wiki</a></div>
</p>
</div>
<div id="main-content">
<p>Cryptids, animals that haven't been proven to exist or have little or no information documented on them, could very well be around us. No one can
disprove their existence, but there is evidence that can neither support nor destroy the possibility of them being real. Cryptozoology (the study of
cryptids) comes from the Greek words: <i>kryptos</i>, <i>zoon</i>, and <i>logos</i>, which translate to: hidden, animal, and discourse. The term was coined
by Lucien Blancou when he dedicated a book to Bernard Heuvelmans, "the master of cryptozoology". Accounts of cryptids are abundant and diverse. Even if outsiders
to an area have never heard of a cryptid, the native peoples often have tales of them; if the creature never existed, surely they would not have accounts
and stories about them.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Cryptozoology Main Page</div>
<p>Demonology, or the study of demons, is a branch of theology, and involves the studying of demons' existence, or the belief in them. Demons are very common
in religion, and are not always evil. In fact, most demons in ancient religions were good, bad, or both. Djinn (Middle Eastern demon-like beings)
could become good and adopt Islam. However, in some religions, like Christianity, demons are always evil and serve their lord, Satan.A demonologist studies
demons and catalogues their existence; they made be a member of the occult or an exorcist for one of the major religions of today.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Demonology Main Page</div>
<p>Mythology is the study of myths, which are tales that have been gathered and reflect on a culture's beliefs. Myths were abundant in ancient
civilizations like Egypt, Greece, Japan, and Rome, but in the modern world our myths reflect things that aren't religious or spiritual in any way. Tribal mythology is abundant in areas
of Pacific Asia or Africa.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Mythology Main Page</div>
<p>
This website is the source of information on all of these topics. It is an unprecedented amalgamation of information that is free for you to read!</p> </div>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p><?php
include "footer.php";
?></p>
</div></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In Firefox, it's perfectly okay. The Left sidebar nests within the main container and looks gooood. In IE, though, the sidebar jumps in between the header and the maincontainer so that it is in the middle making a huge gap. http://mythscape.freezoka.com If you'd like to see what I'm talking about. Please help PROB FIXED hi, I have a site im working on: www.tomaustin.dsl.pipex.com/webdev I have #mainbox on the left and #subnav on the right I want the subnav to have height 100% ( i know it is, but thats to show the other problem) I also have subnav going under mainbox when there is less content in main box basically im trying to get it to look like www.alistapart.com can anyone help, just ask if the probem sisnt make sense thanks PROB FIXED I was asked to change the header to a rotating one, and I found a nice jquery solution. Of course at first it made the links at the top (on top of the image) disappear, but then I looked at the jquery code and saw that it used z-index (1000), and so I made <header p> = z-index of 6000. That brought them back and in fact it looked pretty good... except in IE. And, depending on what I'm doing to fix the IE problem, Safari. In those browsers, the rotating header appears flush under the header p links, rather than flush up against the border -- and you can see the old static image peeking out. http://esdcar.org/about/board.html?category_id=1&sub_id=2 I googled z-index and IE and found several different options for stacking problems, which it seems like this is. (Am I wrong?) Negative z-index on the header div that contains header p, solved the problem in Safari but not IE. I followed some other suggestion and made all the parent elements successively 1 higher in value. Basically I've tried many things and none have worked. This is the current iteration: Code: #container
{ color: #775b36;
background-color: #ffefca;
border: 4px #f5c674 solid;
width: 800px;
margin: auto;
background: url(../images/bkg_faux.jpg) repeat-y 50% 0;
z-index: 6003; }
<snip (unrelated divs)>
#content
{ width: 75%;
position: relative;
margin: 0em;
float: right;
z-index:6002;}
#header
{ background-image: url(../images/ec_landscape.jpg);
background-repeat: no-repeat;
background-position: top; height: 100px;
border-bottom: 4px #f5c674 solid;
text-decoration: none; color: #775b36;
text-align: left;
margin-bottom: 0em;
position:relative;
z-index:6001; }
#header p
{ float: right;
/*margin-right: 1%;*/
margin-top: 0em;
padding-top: .2em;
font-size: .7em;
position:relative;
z-index:6000;
display:inline;
background:#ffefca;
padding: 2px; }
What am I not getting? It seems like the z-index is the problem that was introduced, but I can't seem to fix it. Well I have a multi-part question. I am obviously new to css. I have a site located here . As you can see in the panel to the left the text spans past the footer. I would like the text to push the footer down. I have been trying for hours to get this to work but well.... here I am Any help would be greatly appreciated. Second part is that I opened this in IE on mac and WHOA! Not good to say the least. Any ideas on how I can hack this to match the way it looks in FF? Again any help would be great. Thanks for your time and expertise, phpkata. Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Hi again. okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use. Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders. Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white. Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover. Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation. Hi, I need some help with understanding why netscape is rendering list items differently to IE The Embedded (Dreamweaver-wizard-created) style sheet looks like this: Code: <style type="text/css">
<!--
.bul-mnu-lst {
font-family: "Trebuchet MS", "Andale Mono", "Arial Unicode MS", "Eras Medium ITC", "Microsoft Sans Serif";
font-size: 80%;
line-height: 140%;
color: #666666;
list-style-position: inside;
display: list-item;
font-weight: bold;
vertical-align: text-top;
list-style-image: url(hme_imgs/bullits/dottedArrw_bul.jpg);
list-style-type: none;
}
-->
</style>
the HTML using the sheet looks like this: Code: <div id="activitiesMnu" style="position:absolute; width:218px; height:186px; z-index:1; left: 17px; top: 227px; visibility: visible;">
<p class="bul-mnu-lst"> football</p>
<p class="bul-mnu-lst"> rugby</p>
<p class="bul-mnu-lst"> tennis</p>
<p class="bul-mnu-lst"> badminton</p>
<p class="bul-mnu-lst"> swimming</p>
<p class="bul-mnu-lst"> squash</p>
<p class="bul-mnu-lst"> volley-ball</p>
</div>
The problem is, Netscape based browsers are ignoring the, line-height: attribute or just misinterpreting it and using what looks like double spacing between lines. This is causing the layer to overlap other page items and looks aweful. In I.E, it looks as expected. i've tried changing to percentages instead of pixels for the value as heard percentages are best Also tried, list-style-position from 'outside' to 'inside' values and, list-style-image: to non and used a default preset setting (square) bullet-style. - but the problem persists. any suggs?? I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: http://www.lockheed-martin.co.uk/css/full_layout_test.html ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that? also I was trying to align the menu to middle but margin:auto isnt working like it did for the body? finally I want to style forms without using floats or br but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own) Code:
form {
width:30%;
}
fieldset, input {
color:green;
border:1px solid green;
}
legend {
margin-left:0.5em;
}
label{
white-space:pre;
margin:0 1em 0em 1em;
}
input {
width:50%;
margin-bottom:1em;
}
input[type="submit"] {
padding:2px;
margin-left:1em;
width:auto;
}
form: Code:
<form action="" method="post">
<fieldset>
<legend>Example of a form</legend>
<label>First Name</label>
<input type="text" name="firstName" size="10"/>
<label>Last Name</label>
<input type="text" name="lastName" size="10"/>
<label>Some options</label>
<input type="checkbox" name=""/> Some
<input type="checkbox" name=""/> other
<input type="submit" name="submit" value="submit"/>
</form>
PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements.. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy |
|||||||