|
CSS - Ie And Firefox Differences And General Questions
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! Similar TutorialsHello - My name is Steve Douglas website designer for AAA Northwest Ohio. I'm 19, and learning as I go - AAA paying for any courses that I need to take, but i'm not the school type of guy. I like to learn it by self-studying; i learn it better by making my own mistakes. Anyways were doing a site re-design, I first started off with a simple re-design with just HTML and tables (whoopity doo), boss was impressed - I was not. I hated it. But - I'm doing a new site design now with CSS, learned how to code it overnight. I started the designing and had wierd errors all around with browser related issues, I would re-design, re-design, and re-design until everything worked Perfect in all Screen Resolutions, IE 5.0, IE 6.0, IE 7.0, and Firefox I got advice from a fellow devshed guy kasmatu (spelling could be off), but helpful guy, gave me the clue to get the Mozilla Firefox Extension for CSS [Love It!]. Now should I follow these tools by heart? I mean like if I click Tools then Validate CSS, and Validate HTML, and Etc. 1. I am at a state where my header finally looks great in all popular browsers, but when I validate my CSS it's saying i'm missing a </div> at line 40 - Which is True! but when I go to add it, um, yea doesn't like that - all ID's are totally screwed from there after. not even the header looks right. And it doesn't look like a simple fix. I mean it's working! - So why should I want to validate my CSS? ALSO - and this is prolly why.. How do I speed up the site? Our Current site that we are using, is running 98 seconds loading time for Dialup users (a minute an a half!). The new CSS is at 45 seconds for Dialup users (i think). I'm pretty sure it's to do with all the Javascripts i'm using, I'm planning on combining the Scripts together and taken out code I do not need. But the document sizes are still huge. --------- I'm looking into HTTP Compression for our server - is this smart? we are running on a windows 2000 server IIS - What are the negatives to installing the compresser? ---------- Here is the site re-design http://www.aaanwohio.com/test/together.php Our Current Site is located at http://www.aaa.com/stop - Zip Code 43465 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. 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 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! 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'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. Its working, lol! phew Hi I am currently trying to self teach myself CSS, harder than I thought, lol. Anyway I have a page that uses CSS but there are certain areas that don't display correctly/I can't get to work. I'm hoping someone can help Page: jinx-inc.co.uk/development Problem Areas are highlighted in this picture (to make things easier) jinx-inc.co.uk/development/problems.jpg 1: This area should have the blue colour all the way down. 2: Pretty much same problem as 1 but this is a repeating background instead of a background colour. 3: There is a Footer but it's gone walk about. The only way I can get it to show is through absolute position as this css file will be used as the master for all pages, so absolute won't work. 4: Table border problem but not too fused about that at the moment. Code available: jinx-inc.co.uk/development/css.txt jinx-inc.co.uk/development/html.txt Many 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/ 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!!!! is there any difference? any right or wrong way? just wondering 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;
}
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 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] 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 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 |
|||||||