|
Internet Explorer CSS Issues
Topics
I have my website look exactly how I want it on Firefox and Safari. I checked it on IE 7 and it looks all out of wack! My design is a 3 column design with a column on the left that has a menu, the middle column has my content so far, and the right column is reserved for banners and links. The problem with IE is the left and right column meet and overlap in the middle of the page. How can I fix this without messing it up for the other browsers? my site is at www. highartculture .com. Thank you very much. Hi I have a horizontal menu made from a list. On hovering over the links its supposed to show a yellow bottom border 3px underneath. Works perfectly in everything but IE7. Any ideas please. I have a horizontel list as my menu with a 1px border to the right of each item as a seperator. Each item has 10px padding to the left and right. In all browsers it shows up as expected in the middle of the menu items but in Explorer the border is way closer to the right, almost pushed up against the item to the right. Any help please. I have done my best to GOOGLE this problem but am not coming up with anything. I'm fairly certain that there is some setting/code that I need to add in CSS that would make this error go away. When I view my site in INTERNET EXPLORER, the main content box is shoved down almost below the sidebar/nav menu. The site works fine in FIREFOX & CHROME. I was hoping someone could help me. I have attached a picture of what it looks like in IE. Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> Hey, I have just about finished this website here except for the footer issue in Internet Explorer. My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha. Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE. Thanks in advance, really appreciated. The link is http://www.laserbodysculpting.ca/beta/ The screenshots in IE are MSIE7.0 and IE6.0 . I'm using the following DIV structure. (http://pastebin.com/meef27b4) Code: <div id="footer"> <div id="fcont"> <div id="f1" class="fwrap"><h2>Newsletter</h2> ... </div> <div id="f2" class="fwrap"><h2>Map</h2> ... </div> <div id="f3" class="fwrap"><h2>Contact</h2> ... </div> </div> <div id="minifooter"> ... </div> </body> </html> Here is the CSS Code: #footer {
width: 100%;
height: 270px;
position: static;
clear:both;
text-align: center;
border-top:solid 1px #414243;
background:#9a9a9a;
letter-spacing: 0.2em;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#footer h2{
font-size: 15px;
color: #414243;
padding:0 0 .5em .1em;
}
.info {
color:#fff;
}
.map {
border: 1px #414242 solid;
margin: 2px;
}
#footer h3{
font-size:10px;
padding:0 0 .5em 0;
letter-spacing:5px;
color:#414243;
font-weight:bold;
}
#fcont {
width:100%;
margin-left:200px;
overflow:auto;
}
#minifooter {
clear:both;
width: 100%;
height: 15px;
padding-bottom:10px;
border-top:solid 1px #000;
background:#414243;
color: #fff;
letter-spacing: 0.2em;
}
#minifooter a:hover {
color:#fff;
}
#f1 {
display: inline;
float:left;
text-align: left;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
width: 300px;
}
#f2 {
display: inline;
text-align: left;
float:left;
position: relative;
margin-top: 10px;
width: 300px;
}
#f3 {
display: inline;
text-align: left;
float:left;
position: relative;
width: 300px;
margin-top: 10px;
}
Hey guys, i finished this website Code: www.styluxhair.de and now in internet explorer the right side div is completely out of place. I messed arround with hit for hours now but i cant seem to get to fix it. I know there is some sort of problem with the footer and the mailform on the right but im really stuck and would appreciate if someone could help me out here. Thanks in advance! index Code: www.styluxhair.de/index.html css file: Code: http://styluxhair.de/files/style.css Hi, I am converting a wordpress theme to Farsi, which is an RTL language. Meaning I have to convert anything that is left to right. Everything has been great, except for the drop down menu. It shows fine in firefox (see link below) http://mytasvir.com/photo/gallery/24b060df15cc3b.gif But in internet explorer, the first level is shifted to the left (see image below) http://mytasvir.com/gallery/image/730/24b060e63235cb.gif In the CSS part below: Code: /* first level */
#pagenav li ul {
float:none;
position:absolute;
display: block;
width: 200px;
left: -999em;
margin-top: -1px;
when I change the position:absolute; to position:relative; the outcome will be as below: http://mytasvir.com/gallery/image/730/24b060f02b67c3.gif which is also not acceptable. What Can i do? I attached the part of style sheet which is related to the navigation, sorry I had to upload on rapidshare.... http://rapidshare.com/files/309492078/style.css please help! i really need help! Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated. Site: www dot 21healthconsult dot com CSS: Code:
/* Generic Selectors */
div.wrapper {
height: 100%;
width: 950px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: none;
color: #000000;
border-bottom: 1px solid #E0E0E0;
}
/**************** Pseudo classes ****************/
:link {
color: #0066FF;
text-decoration: none;
font-weight: none;
}
li {
list-style-type: disc;
line-height: 150%;
}
li :link {
color: #0066FF;
text-decoration: none;
font-weight: bold;
}
:visited {
color: #0066FF;
text-decoration: none;
font-weight: none;
}
li :visited {
color: #0066FF;
text-decoration: none;
font-weight: bold;
}
:hover {
color: #0066FF;
padding-bottom: 5px;
font-weight: none;
text-decoration: underline;
}
li :hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
:active {
color: #0066FF;
font-weight: none;
}
/************************* ID's *************************/
#header {
position: absolute;
width: 900px;
height: 50px;
margin: 0;
margin-top: 15px;
padding: 0 0 50px 50px; /*top right bottom left*/
text-align: left;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 900px;
height: 50px;
margin: 0;
margin-top: 48px;
padding: 0 0 50px 300px; /*top right bottom left*/
font-weight: normal;
font-size: 11;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 15px;
padding: 0 0 0 300px; /*top right bottom left*/
width: 600px;
}
#search_box {
background-color: #F0F0F0;
width: 600px;
height: 28px;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 0;
border: 0;
width: 569px;
background-color: #F0F0F0;
font-color: #000000;
}
#search_box #go {
width: 27px;
margin: 3px 4px 0 0;
font-color: #000000;
float: right;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 80px;
padding: 0 0 50px 50px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 300px; /*top right bottom left*/
margin-top: 80px;
width: 900px;
text-align: left;
}
Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. Hi, I'm quite new at site design and CSS but I'm trying... If you take a look at my site http://www.stunnazine.com in firefox, it looks ok. But in Explorer, you'll notice it scrolls all the way to the right and the top banner and text moves all the way to the right too. I've also noticed that when i work on my wide screen Sony Vaio txn29n, my site looks all weird in Firefox and even worse in Explorer, like the background expands all weird and the black navigation bar moves all the way to the left. What can be done so that the layout looks consistent (and normal) on most browsers and computers? I tried validator.w3.org but that didn't even seem to help... I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine. Please check it he ucables.com css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance Hi, I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox. http://pangeaadvisors.org/default.asp Code: #content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
OK, so IE 8 comes out, and it has the "compatibility mode" icon, to let everyone know the page is broken when the IE8 doesn't like the particular CSS. Through reading through tons of Microsoft documentation, however, I can't find anything that helps validate your CSS for IE8, or even tell you what it likes and what it doesn't like. It actually has some nice developer tools where it allows you to validate your CSS and HTML with W3C, but to no avail. You can be perfectly validated w/ W3C, and still the icon will show up saying it's broken for IE8 (and, in some cases, it actually is). Any one know of where I can find a resource to validate sites for IE8, so that that damn icon doesn't keep showing up, and so I can more easily figure out what the heck it is IE8 doesn't like about my site? I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine. Please check it he ucables.com/search/iphone css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance A web site I am working on is artepizzeria.com and for some reason it is not rendering correctly in internet explorer version 6. The content is just disappearing completely. Your help is much appreciated. -Troy Oltmanns Hi, I would really appreciate some help sorting out an error that seems to only crop up on IE. http://www.formulation.org.uk/redesign Is fine on mac browsers (Safari/Camino/Firefox etc.). and fine on windows firefox. the problem appears to be with content wrap. It covers a majority of the banner and navigation bar background. I did manage to fix this with fixed positioning - however this caused adverse effects to the footer. Thanks in advance, Tom Hi there. I am currently attempting to layout a design that will, in the future, become a live website. The website is located here. I have tested this site using the following browsers: Opera 9.5 [works fine] Firefox 2 [works fine] Firefox 3 [works fine] IE 7 [ISSUE OCCURS] IE 6 [ISSUE + ANOTHER ISSUE OCCURS] Both my (X)HTML (transitional) and CSS (level 2.1) validate according to w3c. You can view the source code of my (X)HTML and CSS below: Code: html4strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Function T .:. Home</title> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="entire-page"> <div id="page-container"> <div id="ghost"></div> <div id="header"></div> <div id="navigation"> <div id="navigation2"></div> <div id="navigation1"></div> </div> <div id="content"> Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/> No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari. <br/> <br/> Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/> Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/> Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/> Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/> Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/> Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/> Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/> Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. <br/><br/> </div> <div id="content-bottom"></div> <div id="footer"> Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/> All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/> and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/> for promotional purposes only. Duplication of any material in part or in whole without the <br/> express written consent of Tom Winchester is strictly prohibited. </div> </div> </div> </body> </html> Code: css
html, body {
margin: 0px;
margin-bottom: 0px;
padding: 0px;
background-image: url(../images/bgpattern.gif);
background-repeat: repeat;
}
#entire-page {
width: 100%;
height: 100%;
}
#page-container {
margin: auto;
width: 750px;
}
#ghost {
height: 15px;
}
#header {
height: 110px;
background-image: url(../images/headers/header1.gif);
background-repeat: no-repeat;
}
#navigation {
margin: 0px;
padding: 0px;
height: 40px;
}
#navigation2 {
float: right;
margin: 0px;
padding: 0px;
width: 375px;
height: 40px;
background-image: url(../images/navbar2.gif);
background-repeat: no-repeat;
}
#navigation1 {
margin-right: 375px;
padding: 0px;
height: 40px;
background-image: url(../images/navbar1.gif);
background-repeat: no-repeat;
}
#content {
background-image: url(../images/contentbg.gif);
background-repeat: repeat-y;
padding-top: 0px;
padding-left: 10px;
padding-right: 245px;
padding-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #858585;
}
#content-bottom {
height: 5px;
background-image: url(../images/contentbgbottom.gif);
background-repeat: no-repeat;
}
#footer {
height: 80px;
padding: 5px;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 11px;
color: #cfcfcf;
}
My problem is this: in IE7, the sight does a couple of things strange: 1) The site loads a bit slower than on the other browsers (not really a big issue...just seems to have something to do with the main problem), and 2) the vertical scrollbar is laggy to say the least. If you scroll up and down the page quickly it will have no idea where it is supposed to be at! On IE6, the browser creates an extra little (appx. 3px wide) space in between the two navigation bars. You can see the page's background pattern through this space. Further, the navigation bars are not pushed aside for this gap...the bg is merely visible ON TOP of the images. Please let me know if you have ANY idea as to what the issue may be. As far as I can see, my code is as simple as I can make it...so I have no idea what else to do. HELP!!!! THANKS!!!! -Tom Winchester- Hey people. i have created a "fixed" toolbar for my website and runs fine in both safari and firefox... however in IE 6 and 7 the toolbar gets stuck and does not flow with the page. i used a fix which makes it apear in the right place this can be found he http://tagsoup.com/cookbook/css/fixed/ here is the website so far, try opening it in both IE and another brouser too see the difference. http://people.brunel.ac.uk/~dt08ajm/playgroundtest/ any ideas on how i can fix it? i can post the code if needed. thanks in advance. Hi guys and gals. I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz my HTML code: Code: <input name="search" type="text" id="search" size="35" /> CSS: Code: input {
padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
^ padding around the textfield supposed to show. It does show up in Opera but not in Internet Explorer. Then I tried this: Code: <input name="search" type="text" id="search" size="35" class="forms"/> Code: .forms {
padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
still nothing. Works fine in Opera, but Internet Explorer seems to be ignoring it. what's the problem? I'm using IE 7 btw Good Evening Folks, I would like to discuss Transparent PNG files and Internet Explorer. I like to use 24-bit PNG files with transparency in my web work. I like to overlay transparent backgrounds onto images with text formatted over the top. I like to use transparent PNG's as backgrounds for buttons, text and boxes all over the place, I even like using them to mask out images. I am very keen on using 24-Bit transparent PNG files in web design. The only thing that really stops me or at least puts me off using them is compatability problems with IE6 and below. IE7 doesn't seem to have any problems with them. I have found away to make 24-Bit transparent PNG files work in IE6, It requires using a proprietary IE filter called AlphaImageLoader I am still experimenting with it, but It seems to work OK utilising a few @import hacks. But I can't make this filter work in IE5.5 or IE5, although Micro$oft's doccumentation says I should be able to make it work in 5.5. Anyway I could always use @import hacks to make IE5 browsers use GIF images instead or maybe even JPGs. Now to me this is a lot of mucking around, I accept that a lot of people still use IE6 but how many people are still using IE5.5 and IE5? Does anyone have any other theories or ideas on how to go about this? i have a div on a page that i want to be centered. i am using in css as Code: margin: 0 auto that works fine and is centered in firefox, but is left aligned in internet explorer. how to accompalish it in iexplorer ?? Kinda odd situation. The first 3-column division is shown weirdly with CSS under Internet Explorer, but it works fine with FireFox The CSS'd page: http://www.trinijunglejuice.com/junglejuice_css.html The CSS: http://www.trinijunglejuice.com/css/styles.css The page it is meant to look like: http://www.trinijunglejuice.com/junglejuice.html If anyone can help me with a fix that'd be great Thanks So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page. It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though. Can someone have a look at it for me ? Thanks in advance ... :-) http://www.EnglishTeachingKorea.com Hey, I use floats in my page to position some div's. The page validates for both css and html-strict. When i run the code below in firefox, everything works fine. When i run it in Internet explorer, it does not. It looks messed up then. PHP Code: echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">'; while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){ echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">'; echo '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'"> '; echo $contact['first_name'] . ' ' . $contact['last_name']; echo '</div>'; echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">'; echo '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>'; echo '</div>'; } echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">'; echo '<br>'; echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">'; echo '<br><br>'; echo 'Total '.$nr_of_rows.' Contacts'; echo '</div>'; echo '</form>'; hope you can help me. thanks in advance Hey guys, I'm trying to use div classes and z positioning to make a background that will stretch to the size of the browser window. The following code works fine in Firefox but the dimensions are wrong when viewed in IE. .bg_image { width: 100%; height: 100%; left: 0px; top: 0px; position: fixed; z-index: 0; } <div class="bg_image"> <img src="image_link.extension" width="100%" height="100%"> </div> My solution so far has just been to use the following to ensure that if it doesn't load properly that at least something loads- *html .bg_image { width: 1600; height: 2150; left: 0px; top: 0px; position: absolute; z-index: 0; } Is there any way I can get IE to recognize the 100% for height and width? Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. |