|
CSS - Browser Differences
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/ Similar TutorialsHello 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 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. 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 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 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 Thanks 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;
}
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] 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!!!! i'm trying to make a black border for images in css with a small white background in the padded area. here is my css: Code:
.image_border
{
border:1px solid #999999;
padding:5px;
background:white;
}
the image looks how i want it in firefox but in internet explorer it doesnt look like any styles are even applied. here is a example you can compare in both browsers: http://www.hiddentreasurehosting.com/image_css.html any ideas what the problem is? also i would like to have a small drop shadow on the right and bottom of the image too but i wasnt sure of the best way to do that. any suggestions are appreicated. thanks for the help! 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 I'm using a CSS-based tooltip on a page I'm developing, and it displays fine on IE (v8), but on Firefox (v3.6.2) there is an additional 25 pixels or so of padding/margin at the right. I can't for the life of me work out why, so if anybody wouldn't mind taking a look at the page in question and seeing if they can fix what I'm sure is a relatively simple problem, I'd greatly appreciate it: As this is my first post, I'm not allowed to post the URL of the page I'm having problems with, so please PM me if you're interested in taking a look. Thanks, Mark 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, So my question is this: How do 'we' go about targeting browsers with IE7 between Vista and XP? The two versions render differently, and in my case, I need to be able to target one in a conditional comment (like I do for IE6 of course) to fix it in that version. The site is www.justmythoughts.com , and it renders correctly in IE7 Vista, however is a good 150px pushed to the side in IE7 XP. What is the 'new' remedy for this type of situation these days?? Is there any solution for this yet? Thanks, Nick I have some text in a div tag, but Mozilla aligns it to the bottom, where as IE alignns it to the top. Code: <div id="bottom" class="bottom" align="center">
<p>Site active since 18 November 2003. This page last modified on: 1 March 2006<br> Webmaster:
<a href='mailto:info@biodiversity.org.na'>info@biodiversity.org.na</a>. Site design, layout and coding by John Irish.</p>
</div>
How can I get them to vertically align them same? Thanks. -Sean Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane I am having what I can only imagine is a very common problem. Firefox is working fine and IE is not. I want the logo then the name image next to it in the header. I am positioning with css as below: Code: <div id="header">
<div class="logoholder">
<img src="images/logo70.jpg"/>
<img class="djembefola" src="images/djembefolaheader.jpg">
</div>
</div>
and the css: Code: .logoholder {
position:absolute;
left : 20px;
top : 0px;
width:500px;
height:70px;
}
#header img {
float: left;
}
#header img.djembefola {
float: none;
}
I am aware that this CSS may be very weak, as I'm not too experienced and am coding by hand. What would a robust way of doing this be. I don't really like this float lark but it was necessary to get the logo to stick left. Is it a good idea to have it inside the logoholder div (albeit bad naming by me) or is it unnecessary? Sorry I just realised that I didn't link to the page I had intended to.... www.djembefola.net Thanks for your time and consideration! |
|||||||