|
CSS - Left Nav Has Fixed Width, But Behaves Differently In Ie And Firefox
The link to my page is:
crowncontainer.com/dev/activity_test.php you'll have to post the www. in front, i'm a new user and can't post URL???? I have validated both the CSS and the XHTML. If you open in IE, the width starts out at 200px, which is what I've defined in CSS. If you open it in Firefox, it is wider and I don't know why? Also - when you click on the submit button, the program will return data in an AJAX call and the data will load in a div directly underneath the form. When the data is returned in IE, the width of the left nav will increase to the same width that displays in Firefox. Because of this, I have to believe that there is some buggy code that causes it to 'sort of' work in IE but not in Firefox? Can someone take a stab at this and help me? I want to keep my left nav width to 200px; Similar TutorialsHi, I'm wondering how do you make two divs next to each other, in line with each other, but have one to the left be a set width, and the one on the right be everything else that is left (changes as the user scales the browser). Here is an example: ( -100px- )( ---------everything else that is left---------- ) (more stuff can go here now) I'm having trouble having one float: left and width: 100px, the other float: right and width: 100% (I think this part is the problem). Hi, I've searched various threads in this forum, even tried re-iterating the question in another similar post to no avail. How is it that in Firefox (1.0) I get overflow occuring on a nested div, yet in IE (6) I do not? i would like vertical scrollbars ONLY, if content is overflowing and not horizontal scrollbars-using a WC3 valid solution if possible. Thanks in advance A snippet of my css... PHP Code: /*css document*/ /* container div class*/ .outer{ width: 336px; height: 448px; border-color: #000000; border-width: 1px; border-style: solid; float: left; margin: 0 0 0 10px; background-color: #ffffff; /*background:url("../images/pg_curl.gif") top right no-repeat;*/ } /* inner-content div class*/ .inner { width: 298px; height: 388px; border-color: #000000; border-width: 1px; /*margin: 34px 0 0 19px;*/ margin: 2px 0px 0px 19px; font-size: 12px; /*line-height: 15px;*/ color: #000000; clear: both; /*scrollbars for content overflow*/ overflow:auto; } /* Example of problem: at the momment, in Firefox inserting this into the .inner classed div is creating horizonal overflow*/ .navigation { width: 298px; } .navigation ul { list-style: none; margin: 0; padding: 0; } .navigation li { border-bottom: 1px solid #ED9F9F; } .navigation li a:link, .navigation li a:visited { display: block; padding: 2px 2px 2px 0.5em; border-left: 10px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; } .navigation li a:hover { background-color: #711515; color: #FFFFFF; } .navigation ul ul { margin-left: 12px; } .navigation ul ul li { border-bottom: 1px solid #711515; margin:0; } .navigation ul ul a:link, .navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; } .navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; } Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE? mediacontour.com/TCS/frequently-asked-questions.php 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 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 Hi I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code:
<style>
.foo {
width: 100px;
padding: 10px;
}
</style>
<div class="foo">Bar</div>
Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code: Code:
<div style='padding: 15px; text-align: left;'>
<div style='float: left;'>
<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
<tr>
<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
</tr>
<tr>
<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
</tr>
<tr>
<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
</tr>
<tr>
<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
</tr>
<tr>
<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
</tr>
</table>
</div>
<div style='float: right;'>
<div style='margin-bottom:5px;'>Element Titles:</div>
<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
</div>
</div>
</div>
Hi, I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image) http://img402.imageshack.us/img402/7830/resize.png URL Attached Image Following is the Code for the Style class mentioned in the image Code:
.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}
.AccButton{
float: right;
align:right;
text-align: right;
position: relative;
top: -1px;
z-index: 10;
width: 16px;
margin:0 5px 0 0;
}
/*USE THIS FOR IE*/
.AccLiIE {
display: inline;
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
height: 19px;
white-space: nowrap;
}
/*USE THIS FOR NON-IE BROWSER*/
.AccLi {
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
white-space: nowrap;
}
Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox. Thanks and appreciate your help Code:
<?xml version="1.0" encoding="UTF-16"?>
<!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>Tableless structure</title>
<style type="text/css">
<!--
* {
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 800px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0px;
padding: 0px;
margin-top: 40px;
}
#head {
background: LightGreen;
width: 100%;
height: 15%;
}
#menu {
background: Pink;
float: left;
width: 20%;
height: 80%;
}
#body {
background: LightBlue;
float: right;
width: 80%;
height: 80%;
}
#foot {
background: Silver;
clear: both;
width: 100%;
height: 5%;
}
-->
</style>
</head>
<body>
<div id="head">Header</div>
<div id="menu">Menu</div>
<div id="body">Body</div>
<div id="foot">Footer</div>
</body>
</html>
This code works fine on Firefox by centering horitzontally the page but in IE7 stays left aligned. Can you help? Thank you! Running here I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently. Sample Page: http://www.mybb-emods.com/new/index.htm CSS File: http://www.mybb-emods.com/new/stylesheet.css Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers. Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly. If anyone has any idea how to fix these problems then I would very much appreciate the advice. Thanks. i have a two div tags but the upermost tag sits outside the boundary of the one below and the page seems to be over stretched in IE7 the page address is www.ftpimage.com does anyone have any suggestions my css is as follows Code: body {
margin: 0px;
background: url(../img/top_bg.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: "15";
}
p {
line-height: 50px;
margin: 11px 0 10px 0;
padding: 0px;
}
h2 {
color: #9f9f9f;
margin:0px;
padding:0px;
font-size: 15px;
}
ul {
font-size: 10px;
margin:0;
padding:0;
list-style-image: url(../img/bullet.gif);
}
a {
color: #93B300;
}
a:hover {
text-decoration: none;
}
blockquote{
background: #F7FDE3;
color: #606060;
padding: 0px;
}
/**** Main Container ***/
#wrap {
margin-left: 10px;
margin-right: auto;
width: 640px;
}
/**** Top ***/
#top {
width: 155%;
height:85px;
color: #fff;
background: #000 url(../img/top_bg.gif);
overflow:hidden;
}
#top h2
{
color: #87CEFA;
letter-spacing: 3px;
font-size: 2.4em;
font-weight: normal;
position: relative;
margin: 0px;
top: 33px;
display: block;
float: left;
background: url(../img/bg_t.gif) no-repeat;
padding-left: 8px;
}
#top h2 a {
color: white;
text-decoration: none;
}
#top h2 a:hover {
color: #93B300;
}
#page
{
margin-right: 20px;
max-width: 10px
}
/**** Main Menu ***/
#menu {
display: block;
float:right;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
white-space: nowrap;
}
#menu li a {
display: block;
padding: 20px 10px 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
* html #menu a {width:1%;}
#menu li a:hover {
background: url(../img/bg_menu.gif);
}
#menu li a.current {
letter-spacing: 1px;
color: gray;
background: url(../img/bg_menu.gif);
}
#menu li a.current:hover {
color: #fff;
}
/**** Content Container ***/
#content {
width: 65%;
margin-top:30px;
border: solid 2px black;
}
#content h2 {
margin: 0;
padding: 10px 0 10px 0;
}
/**** Content ***/
#left ul {
padding: 15px 0 15px 35px;
margin:0;
}
#left li {
margin-bottom:5px;
}
#left .box {
width: 390px;
float:left;
display: block;
margin-left: 20px;
display: inline;
}
/**** Sidebar ***/
#right {
width: 315px;
float: right;
display:block;
margin-top: 10px;
}
#right .box {
width: 20em;/*280px*/
background: #87CEFA;
border: 1px solid #E1E1E1;
padding:10px 10px 55px 10px;
float: right;
}
#right .box h2 {
font-size: 3.1em;
margin: 0px 0 0px 0;
padding:0px 0 5px 0;
}
#right .box a {
margin: 10px 0 10px 0;
color: #93B300;
font-size: 20px;
}
#right .box p {
margin: 5px 0 10px 0;
line-height: 15px;
}
#right .box ul {
padding: 0 0 0px 20px;
margin:10px 0 10px 0;
}
#right .box li {
margin-top:5px;
}
html>body .box
{
width: auto;
min-width: 20em;
}
#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.3em 0.3em 0.8em;
border:solid;
border-width:medium;
border-bottom: 2px; /*solid #1a1a1a*/
border-top: 2px; /*solid #1a1a1a*/
border-color:Black;
color: black;
background-color: #87CEFA;
font-weight: bold;
text-decoration: none;
font-size:medium
}
#nav a:hover{
color: #1a1a1a;
background: url(../img/bg_t.gif) no-repeat;
background-color: #fff;
font-weight: bold;
}
/**** Clear Div ***/
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
/**** Footer ***/
#footer {
margin: 40px auto 0 auto;
text-align: center;
border-top: dotted 1px gray;
padding: 20px 0 20px 0;
width: 70%;
}
#footer p {
margin: 0px;
padding: 0;
one line of text isn't in the position that i want it to be for ff and ie. Chrome is able to read the css code: chrome: Code: p1 {
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
display: block;
-webkit-margin-befo 5.4em;
-webkit-margin-after: 1em;
-webkit-margin-start: 220px;
-webkit-margin-end: 0px;
}
ff,ie: p1{ line-height: 1.3em; font-size: 1.2em; font-weight: bold; } I want the " learning from questions" at the bottom right of the logo. Thanks for helping! site link: http://www.nyitforums.com/ Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it: http://www.iqdrop.com/newiq/index.php Then in IE You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE. I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help. Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code:
<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li>
<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>
<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>
And the CSS Alignment: Code:
#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}
Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution? Update: I rewrote everything, and it somehow works now. Nevermind. |
|||||||