|
CSS - Float, Positioning Differences In Ff And Ie
There are two issues with my code that I need some help with.
I'm trying to set the width to for the main content wrapper, IN IE it renders correctly, but in FF, it clears the sidenav float and starts on new line. By setting the width to a fixed px, I fix the problem in both browsers but I loose my liquidity. Second, with the main content div I have a 2 collumn layout, floated on top of each other. This renders properly in IE, but not in FF. The basic layout of the code is html Code: Original - html Code <div>Banner</div> <!-- This div is a fixed width div, floated to the left and has several inner divs that contain graphical elements--> <div>Side Navigation</div> <!-- This div is the main content area floated next to Side Navigation Div, There are several inner divs that contain graphical elements. When I set this width to atuo (for liquid) it works with IE, but doesn't with FF --> <div>Wrapper <!-- This div contains 2 collumns floated The float is being rendered in IE, but not in FF I have put a green border around the 2 collumns for clarity <div>Inner Content <div>Collumn 1</div><div>Collumn 2</div> </div> </div> /* The offending CSS Wrapper ID */ div#page { float:left; margin-top:5px; margin-left:10px; width:750px;/* renders in Both, but not liquid */ /* width: auto; renders in IE and I have liquid */ } /*These are the 2 collums which render in IE, but not FF */ div#col-a { position:relative; float:left; padding-left:10px; width:50%; } div#col-b { position:relative; padding-left:10px; padding-right:10px; float:left; }
<div>Banner</div>
<!-- This div is a fixed width div, floated to the left
and has several inner divs that contain graphical elements-->
<div>Side Navigation</div>
<!-- This div is the main content area floated next to Side
Navigation Div, There are several inner divs that contain
graphical elements. When I set this width to atuo (for liquid)
it works with IE, but doesn't with FF -->
<div>Wrapper
<!-- This div contains 2 collumns floated
The float is being rendered in IE, but not in FF
I have put a green border around the 2 collumns for clarity
<div>Inner Content
<div>Collumn 1</div><div>Collumn 2</div>
</div>
</div>
/* The offending CSS Wrapper ID */
div#page {
float:left;
margin-top:5px;
margin-left:10px;
width:750px;/* renders in Both, but not liquid */
/*
width: auto;
renders in IE and I have liquid */
}
/*These are the 2 collums which render in IE, but not FF */
div#col-a {
position:relative;
float:left;
padding-left:10px;
width:50%;
}
div#col-b {
position:relative;
padding-left:10px;
padding-right:10px;
float:left;
}
You can view my work here, I haven't put the CSS in its own page yet so you can see the source Liquid, but doen't work in FF Renders in Both, but no liquid Similar TutorialsThanks for taking the time to read my question. I have an <ul> that has different padding-right for each <li>. My problem is that the padding is where I want it to be in IE, but FF does not kick it over as far. I really don't know why. the <ul> is supposed to curve from the center of the page to the outside back to the center, like a 1/2 moon. Any ideas? Thanks, 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">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
<div id="FaderBarWP">Warren Persowich</div>
<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
<div id="FaderBarHC">Humor Consultant</div>
</div>
<p/>
<hr class="HRBorder" />
<div id="OuterLeft">
<img class="WPName" src="images/WPName.jpg" alt="" />
<div id="MainBox">
<div id="LeftBox">
<div id="BioBox">
<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>
<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>
<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>
<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>
<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>
<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>
</div>
<div id="BioFooter">Move cursor over text to read on...</div>
<div id="Broadcast">
<!-- begin embedded WindowsMedia file...-->
<OBJECT id='mediaPlayer' width="320" height="285"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="http://servername/path/to/media.file">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="true">
<param name='showControls' value="true">
<param name='loop' value="true">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
</EMBED>
</OBJECT>
<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
</div>
</div>
<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
<div id="RightBox"><ul>
<li class="LB1TOP"><a href="#">Seminars</a></li>
<li class="LB2"><a href="#">Stand-Up</a></li>
<li class="LB3"><a href="#">Intro Psych</a></li>
<li class="LB4"><a href="#">Selected Transcripts</a></li>
<li class="LB3"><a href="#">Broadcast Archives</a></li>
<li class="LB2"><a href="#">Links</a></li>
<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
<!--<li class="LB4"><a href="#">Link #8</a></li>
<li class="LB3"><a href="#">Link #9</a></li>
<li class="LB2"><a href="#">Link #10</a></li>
<li class="LB1"><a href="#">Link #11</a></li>-->
</ul></div>
</div>
</div>
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>
CSS: Code: body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
margin-left: 0px;
}
#OuterLeft {
background-color: #000000;
padding-left: 16px;
float: left;
}
.WPName {
float: left;
margin-top: -14px;
}
.HRBorder {
width: 72%;
color: #330099;
background-color: #330099;
margin-bottom: 0px;
}
#MainBox {
background-color: #ffffff;
width: 780px;
overflow: hidden;
background-image:url('Images/RightFadeBW.jpg');
background-repeat: repeat-y;
background-position: top right;
}
#FaderBar {
/*background-color: #ECF9FF;*/
background-color: #A9A9A9;
margin: 0 auto;
height: 105px;
width: 780px;
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}
#FaderBarWP {
float: left;
height: 40px;
width: 300px;
margin-left: 15px;
margin-top: 5px;
font-size: 40px;
/*background-color: red;*/
}
#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}
#FaderBarImg {
float:right;
height: 105px;
width: 199px;
}
#LeftBox {
width: 380px;
/*height: 500px;*/
float: left;
background-color: aqua;
background-image:url('Images/LeftFadeBW.jpg');
background-repeat: repeat-y;
}
#CenterBox {
width: 150px;
/*height: 500px;*/
float: left;
background-color: red;
}
#RightBox {
width: 250px;
/*height: 500px;*/
float: left;
background-color: yellow;
}
#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;
float: right;
margin: 5px 10px 0px 0px;
overflow: hidden;
}
.BioContent {
width: 100%;
float: left;
font-size: 11px;
margin-bottom: 5px;
border-top: 1px dashed #333333;/*#dcdcdc;*/
border-bottom: 1px dashed #333333;/*#dcdcdc;*/
padding: 5px;
}
#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}
#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 10px;
/*background-color: green;*/
}
ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;
width: 150px;
background-color: #F2F2F2;
list-style-type: none;
}
.LB1TOP {
margin-right: 40px;
margin-top: 35px;
}
.LB1 {
margin-right: 40px;
}
.LB2 {
margin-right: 35px;
}
.LB3 {
margin-right: 30px;
}
.LB4 {
margin-right: 25px;
}
.LB5 {
margin-right: 20px;
}
.LB6 {
margin-right: 15px;
}
ul li a {
display: block;
}
ul li a:link {
text-decoration: none;
color: black;
}
ul li a:visited {
text-decoration: none;
color: black;
}
ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}
ul li a:active {
text-decoration: none;
}
img.HeadShot {
margin: 125px 0px 0px 10px;
}
#Signature {
/*background-color: #E2E2E2;*/
/*margin: 0 auto;*/
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
text-align: right;
float: right;
}
a.ReadOn:link {
text-decoration: none;
color: black;
}
a.ReadOn:visited {
text-decoration: none;
color: black;
}
a.ReadOn:hover {
text-decoration: none;
color: black;
}
a.ReadOn:active {
text-decoration: underline;
color: black;
}
.Sig {
color: #808080;
font-size: 10px;
}
a.Sig:link {
text-decoration: none;
}
a.Sig:visited {
text-decoration: none;
}
a.Sig:hover {
text-decoration: overline underline;
}
a.Sig:active {
text-decoration: none;
}
http://trinitylifebaptistchurch.org/test/content_page1.html My left float container is correct, but the right float container is not in the correct spot. Instead of being to the right like I want it is on the next line and to the right. Why is it going down a line? Thanks. Hi all, After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then ) The goal I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?) What I did so far To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code: html4strict Code: Original - html4strict 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"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }
* {
The problem(s) Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one) Thanks for any help and if something isn't clear I'll try to explain it further! subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Its working, lol! phew i've coded my layout perfectly for Firefox, but there are a few things that are irking me in Internet Explorer. http://www.lovemeforme.org/new/ the things that are bothering me: - In IE, under the navigation, each link in the menu has a break under it, i don't want the break there, I want it how it looks in firefox. - under the blog title, I don't want a space there, i want it right under the title how it is in ff, but in IE it puts a break there too. - same with the breaks under the titles on the sidebar, i don't want breaks there either. - on the side bar, under the ask me section, there is a black border around the 'ask' button, how can i get rid of that? also, how can i make the textarea the same size as the ask button? Can anyone help me fix these small problems? Thanks so much! It's much appreciated. Hi guys, Im building a DNN site for a client, and have used a menu system theyve specified. Ive got it looking how I want, however in IE I have a couple pixels of padding below the UL container.. in FF its perfect (the butt up against each other)... Any hints? Im stumped. Cant post URL's, so if you're bored and feel like making someones day, feel free to PM me Cheers!!!! Hi guys I was checking the CSS on a website I've been developing and I've noticed that Firefox is displaying the font size differently on the different operating systems(XP and OS X). Does anyone know if there is a hack I could use to determine if the user is viewing the site in Firefox using a PC or Mac and set a style sheet accordingly. Or this there a more simple fix for this? Thanks Can different browsers interpret CSS differently because of the order you put things in? I have the following CSS in my website Code:
div#container
{
background-color: #FFFFFF;
border: 1px solid #FBFBFB;
width: 660px;
height: 250px;
padding: 5px;
margin-left: 50px;
margin-top: 5px;
}
div#left
{
float: left;
clear: right;
width: 350px;
height: 250px;
background-color: #FF7800;
}
div#right
{
float: left;
clear: right;
width: 350px;
height: 250px;
background-color: #F3F3F3;
margin-left: 5px;
}
and the html Code: <div id="container"> <div id="left"></div> <div id="right"></div> </div> in IE it works fine, the layout is next to each other in a box but in safari (on mac) the right hand box is position below the left hand one... You can see the site at http://www.impulsive-solutions.co.uk/isnoname/ is there any difference? any right or wrong way? just wondering I am trying to build a site, and integrate a blog with Feedburner. The site is wwhgc.craigstanley.org The Issue: When the blog is present, the left column drops below all of the right content in IE (but not in Firefox) When the blog is not present (click "tandem flights" at the top), the content is fine. Feedburner says that they do not set a width to their content. Is there any way to see the actual HTML that the Feedburner Javascript spits out? Please help me . . . too many days down the drain on this one. -Craig Okay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this. When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way? URL for the website so you can see it is below. (There's really almost nothing on it, just messing around with layout) http://www.omnimist.com [edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit] I am using CSS to display content from a XML document... the following code works part of the way in ie and part of the way in ie, but i need both parts working together in one browser. The XML document is... Code: <quotes>
<heading>NASDAQ 100</heading>
<subHeading>Current quotes</subHeading>
<dateTime>
<date>11/01/2008</date>
<time>11:45:05</time>
</dateTime>
<titles>
<column id="c1">Symbol</column>
<column id="c2">Name</column>
<column id="c3">Last Sale</column>
<column id="c4">Net Change</column>
<column id="c5">% Change</column>
<column id="c6">Volume</column>
</titles>
<stocks>
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
<stock class="up">
<symbol>ABGX</symbol>
<company>Abgenix, Inc.</company>
<lastSale>$9.22</lastSale>
<netChange>0.06</netChange>
<pChange>0.66%</pChange>
<volume>1.396</volume>
</stock>
...so on and so on...
The CSS I am using is... Code: quotes {display:table;}
heading {display: block; position: absolute; top: 17%; left:44%}
subHeading {display: block; position: absolute; top: 20%; left:44%}
dateTime {display: block; position: absolute; top: 10%; left:75%;}
titles {display:block; position: absolute; top: 24%;}
titles * {display: table-cell; width:175px; }
stocks {display:table;}
stock {display:block; position: relative; top: 30%;}
stock * {display: table-cell; width:175px; }
stock[class="down"] symbol {display: table-cell; width:175px; color:green}
stock[class="up"] symbol {display: table-cell; width:175px; }
stock[class="unchanged"] symbol {display: table-cell; width:175px; }
In IE: The layout of the heading, subheadings, etc are right, but the declarations based on XML attributes "stock[class="down"] symbol {display: table-cell; width:175px; color:green}" do not work. In FF: The layout of the heading and subheading gets all crammed to the right and doesnt look right at all, BUT the declarations based on XML attributes are working; the stocks with attribute of "down" are showing up as green text. Any suggestions on why this is and how to fix it. Also, is anyone else seeing anything different than myself? link: http://mtm324php.info/nasdaq.xml Thank you. My site is http://www.shiningstarsyouth.com/. If you render the page in IE and Mozilla it seems that Mozilla renders my nav bar a couple of pixels lower than IE. Also the hover link style sheet that I used on the links in the upper right of the page work in Mozilla, but not in EI. The long vertical grey line that goes down the center of the page also renders differently in length. Why do these differences exist Hi there, As I said, another newbe to css... I created a menu (unordered list, list-items woth hrefs). My idea was to create a "blurred" image and the same image without filters. This "blurred" image is default. The sharper image just is visible in case of a hover. Until this point there are no big mountains to cross, but... I've tried to set the background-image at a fixed position. It works great in ff (ff 1.0), but the image is not at the fixed position in IE... Please let me know what I'm doing wrong... Tnx! Hello all, I have the following test page : http://st2plugin.benbun.co.uk/control/test.php This renders fine in Firefox as it does the following : - Occupies the full width of the screen - Maintains column widths for the 1st, 2nd and 4th columns. - Prevents the rows occupying more than one text line. However, when viewing it in IE7, I get a number of issues - The table width is wider than the screen and as such the far right of the table is off the screen. - The rows within the table occupy more than one row. Anyone have any pointers on how I might address this? Thanks |
|||||||