|
CSS - Problem With Ff Vs. Msie7
Hi,
can someone see what the problem is with http://www.alphaworks.co.uk/test/msie7_problem.html ? It renders fine in FireFox but is a mess in MSIE 7. Have I made a mistake or is there an issue with MSIE 7? Thanks, Geoff Similar TutorialsI am in the process of replacing a totally table generated web page with one using CSS. This seems to be fairly straightforward except that I'm having an issue that seems to be backwards from what I see when I lookup the issue. In this case, I have an outerbox div that is supposed to contain the entire content and be a minimum of a certain size. If the content within the outerbox is longer, then I need it to expand to match. This is working on MSIE7, but not in Firefox 2 which is the backwards part. I've stripped out a lot of the extra stuff to show the outerbox, a few inner boxes and a example of where the content is going past the end of the minimal size. Sample Page: http://www.zipturtle.org/test.php Associated CSS: http://www.zipturtle.org/test.css At this point, I've tried a number of changes and nothing has worked. I've tried some of the hacks like: PHP Code: selector { min-height:500px; height:auto !important; height:500px; } But that didn't seem to work either. I have not been able to "see" what this looks like with MSIE6 as I don't have access to it, so it is plasible that while it looks okay in MSIE7 it does something similar as my Firefox is showing. On the sample page above, the text in the main body of the document with the Arff's in it, is longer than the normal minimum height. In Firefox it is extending beyond the outside box where in MSIE7 is is working as I would expect. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks i'd like to align my table to the left, i ve tried so many stuff but cant get it.... in html something like this <table width="75%" border="0" align="left"> what is the css way of getting this result... pls help me out... I'm trying to replace all the tables in my site for divs This is a test page for the main div container. Inside this will be the 3 columns of the layout: http://www.djbrunofacca.com.br/index2.php It renders ok in firefox but in ie 6.0 half of the box gets off the screen to the left. I've been trying to correct this for 8 hours straight and nothing. heres the css for the whole 3 columns thing: Code:
.box {
border:3px solid black;
position: absolute;
left; 0px;
width: 720px;
height: 100%;
}
.leftcol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
width: 140px;
height: 100%;
background-color: #333;
}
.maincol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
left: 110px;
width: 440px;
background-color: #0066cc;
}
.rightcol {
position: absolute;
padding-left: 5px;
padding-right: 5px;
top: 0px;
right: 0px;
width: 140px;
height: 100%;
background-color: #333;
}
thanks bruno Hi, I am a newbie to css and have attempted to convert various webpages to css over the past few months. Although I am new to css I have been working on computers (programmer and user) for the last 13 years. My main observation is that css is being limited by the inability or lack of interest on the part of browser developers to ensure that all pages are rendered the same in all browsers. It is very frustrating to work hard on a complicated layout only to open the page from another browser and have all your hard work look as if it has been through the spin cycle. Of course such criticisms apply in other circles, for example different compilers handling c/c++ code is slightly different ways. For a programmer working on code to run him/herself this is not so serious since you get the code to work on the machine you want it to run on, with webpages we don't have that luxury. Any thoughts? R Haynes Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css. Here is the css.. body { margin:0; padding:0; } div.container { text-align:center; } div.center { margin-top:20px; margin-left:auto; margin-right:auto; width:800; text-align:left; } div.left { float:left; width:100; height:500; background-color:#007700; } div.right { float:right; width:130; height:500; background-color:#e8e8e8; font-size:10pt; } div.header { clear:both; width:40%; } div.footer { clear:both; margin:0; width:100%; } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a.topmenu { float:right; width:5em; height:2em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } a.topmenu:hover { background-color:#005500; color:#e8e8e8; } a.topmenu:visited { float:right; width:5em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } li { display:inline; } a.leftmenu { color:#ffffff; text-decoration:none; } a.leftmenu:hover { color:black; } a.leftmenu:visited { color:#ffffff; text-decoration:none; } and here is the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="newstyle.css"/> </head> <body> <div class='container'> <div class='center'> <img src="fdat_logo_short.jpg" width=250 /> <ul> <li><a class='topmenu' href="contact.php">Contact Us</a></li> <li><a class='topmenu' href="about.php">About Us</a></li> <li><a class='topmenu' href="services.php">Services</a></li> <li><a class='topmenu' href="news.php">News</a></li> <li><a class='topmenu' href="home.php">Home</a></li> </ul> </div> </div> </body> </html> Hi there, Does anyone know what this code messed up in IE6, its fine in IE7 and firefox? I'v attached the html, css and a screengrab. Thank Code: <div class="commentAvatar"><img src="/images/avatars/noavatar.gif" alt="USER" border="0" height="50" width="50"></div>
<div class="commentMessage">
<div style="float: right; width: 32px; text-align: center;"><div class="voteBad" id="3:-:15"></div><div class="voteGood" id="3:+:15"></div></div>
<em class="comment-info"><span>4 votes</span>
<strong>guest23</strong> said <strong>(3 days, 10 hours ago)</strong></em>
my message<br>
is here</div>
Code: /* CSS*/
.commentAvatar {
width:70px;
height:64px;
float:left;
margin-left:114px;
background-image:url(images/comment_left.gif);
background-position:right;
background-repeat:no-repeat;
}
.commentMessage {
width:391px;
min-height:50px;
margin-left:184px;
padding: 5px 10px;
background-color:#555555;
background-image:url(images/comment_bg.jpg);
background-repeat:no-repeat;
}
Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug I am sorry, I can't show the page as an example as it is a clients website. Basically the problem is the box model (I think). In IE the background file loads fine, but in FF it doesn't. It is a box inside a box, inside a box. I have tried body #divname html # divname html > divname and all other selector variants I can think of to no avail. I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images. I've got this little navigation menu, everything works in Opera and Firefox, but in IE the border overlaps the whole thing.. See at http://www.leetwebmasters.com/2.0 CSS: Code: #menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
}
Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site. I'm trying to firstly just set the background of the whole bar, Code:
#nav-m {
font: normal 12px Verdana;
font-weight: bold;
width: 100%;
}
#nav-m ul {
float: left;
left: 0;
padding: 2px 0;
text-decoration: none;
text-indent: 5px;
}
#nav-m a {
display: block;
width: 10em;
w\idth: 6em;
color: #012345;
text-decoration: none;
padding: 0.25em 2em;
}
#nav-m a.daddy {
}
#nav-m li {
float: left;
padding: 0;
background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
background-repeat: no-repeat;
}
#nav-m li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav-m li li {
padding-right: 1em;
width: 13em
}
#nav-m li ul a {
width: 13em;
w\idth: 9em;
}
#nav-m li ul ul {
margin: -1.75em 0 0 14em;
}
#nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
left: -999em;
}
#nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
left: auto;
}
#nav-m li:hover, #nav-m li.sfhover {
background: #bdd7e6;
}
however the background doesnt show up, and the font alignment isnt right, - there are so many problems http://alturl.com/nfkp Hello everyone, for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6. there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different. Any suggestions. thank you. <div id="mytabsmenu" class="tabsmenuclass"> <span style="cursorointer"> <ul> <li><a rel="gotsubmenu[selected]">Trust Applications</a></li> <li><a rel="gotsubmenu">General Applications</a></li> </ul> </span> </div> <div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;"> <!--1st link within submenu container should point to the external submenu contents file--> <a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> After hours of pain in my head and probing to get my leftmenu 100% height of my contentbox... I need some help i think... http://www.ipan.be/dev (the bad result with leftmenu not 100%) http://www.ipan.be/dev/styles/ipan.css http://www.ipan.be/dev/styles/ipan_news.css any solution to get the thing that is making me crazy working? I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ??? Hi again! I have been trying to solve this problem for a while no, but with no success. You can see the problem he http://files.upl.silentwhisper.net/upload0/divgap.JPG The html-code: Code: <a href="bildvisning.php?id=<?=$bildId?>" target="_blank"><img src="http://www.tibproduktion.se/allabilder/<?=$miniatyr?>" border="1"></a> And the CSS: Code:
div.img
{
padding:1em;
width:160px;
border:1px solid #e0e0e0;
background-color:#fbfbfb;
margin-bottom:1em;
margin-right:2em;
float:left;
text-align: center;
cursor: pointer;
}
div.img:hover
{
border:1px solid #c0c0c0;
background-color:#e0e0e0;
}
div.img img { border:0; }
It helps to fix the height to for example 100px, but the problem is that I have thumbnails with other dimensions, so I would prefer not to have a fixed height. Any ideas? Check this url > http://tinyurl.com/26lfqk with mozilla or ie7 and you will see that is ok... if i use ie6 the left menu is moving down... can anybody help me? the css is Code: /* Hot Property's CSS File */
#hp_con1 {
}
/****** Global Containers ******/
#con_global {width: 98%;}
/****** Headings ******/
#heading_Agent, #heading_Co, #heading_Prop, #heading_Type, #heading_Types, #heading_Featured, #heading_Search, #heading_AdvSearch, #heading_Co_Contact, #hp_view_agent_title, #hp_view_agent_contact, #hp_ManageProp, #hp_EditProp
{
font-size: 12px;
font-weight: bold;
color: #616161;
background-color: #FFFFF1;
margin-bottom: 0px;
text-align: left;
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #D8D8D8;
}
/****** Borders ******/
#hp_view_agent_con, #hp_emailform_con, #hp_searchresult_con, #hp_view_co_con {
background-color: #2C3336;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
padding: 10px;
text-align: left;
}
/****** Features ******/
#hp_view_features_title {
font-size: 16px;
font-weight: bold;
color: #616161;
text-decoration: underline;
margin-top: 16px;
margin-bottom: 6px;
}
/****** Featured ******/
#con_featured1 { }
/****** Search ******/
#con_search1 { }
#con_search2 { }
#con_asearch1 { }
#con_asearch2 { border-left: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; background-color: #2C3336}
.hp_asearch_row0 { background-color: #2C3336; }
.hp_asearch_row1 {background-color: #2C3336; }
#con_sort1 {
width: 120px;
text-align: left;
display: inline;
}
#con_sort2 {
text-align: right;
display: inline;
width: 370px;
}
#con_sort {
background-color: #2C3336;
padding: 5px 5px 5px 7px;
margin-bottom: 6px;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
/****** Search - Page Counter ******/
#hp_search_pagecounter_top {
margin-top: 10px;
text-align: center;
}
#hp_search_pagecounter_bottom, #hp_pagecounter_bottom {
margin-top: 5px;
text-align: center;
padding: 6px;
background-color: #2C3336;
border: 1px solid #C0C0C0;
display: block;
}
/****** Front Page - Types******/
#con_types1 { }
#con_types2 { }
.con_types3 {
float: left;
width: 50%;
vertical-align: top;
padding: 5px;
text-align: left;
}
/****** Listing ******/
#list_agents, #list_searchresults, #list_properties, #list_featured {
margin-top: 15px;
text-align: left;
}
/****** Listing - Property ******/
#hp_icons {
text-align: right;
padding-top: 5px;
}
.hp_prop {
width: 100%;
display: block;
float: left;
text-align: left;
margin-bottom: 10px;
}
.hp_details {
width:50%;
vertical-align: top;
padding-left: 8px;
float: left;
}
/****** Type ******/
#con_type1 { }
.types_desc {
margin-top: 3px;
margin-bottom: 5px;
}
/****** Company ******/
.hp_view_co { }
#hp_view_co_photo {
float: left;
margin-right: 12px;
}
#hp_view_co_details {min-height: 170px;}
#hp_caption_coname {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
/****** Property ******/
#con_hp1 { }
#con_hp2 { }
.hp_view_details {
font-size: 13px;
vertical-align: top;
padding-left: 7px;
padding-top: 10px;
text-align: left;
border:0px solid #C0C0C0;
line-height: 20px;
}
#standard_photo { }
#hp_view_intro_text {
line-height: 15px;
margin: 7px 0px 0px 0px;
}
#hp_view_full_text {
line-height: 15px;
margin: 7px 0px 0px 0px;
}
.hp_caption {font-weight: bold;}
.hp_price {color: #CE1400; font-size: 13px;}
/****** Property -Photo ******/
#hp_view_standard_photo_con1 {
text-align: center;
background-color: transparent;
margin: 10px;
}
#hp_view_standard_photo_con2 {
text-align: center;
float: center;
margin: 0px 20px 0px 20px;
width: 300px;
background-color: #2c3336;
padding: 1px;
}
#hp_view_standard_photo_con3 {
text-align: center;
width: 80;
background-color: #2c3336;
}
#hp_view_standard_photo_con4 {padding: 5px;}
#hp_view_standard_photo_title {font-weight: bold; color: white;}
#hp_view_standard_photo_desc {
}
.hp_view_thumb_con {
height: 120px;
display: table;
padding: 0px 5px 10px 0px;
margin-left: auto;
margin-right: auto;
}
.img_thumb {
width:120px;
vertical-align: top;
float: right;
text-align: center;
padding: 0px;
margin: 1px 1px 1px 10px;
border: 0px solid #C0C0C0;
}
ul.thumb {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 485px;
list-style: none;
}
ul.thumb li {
text-align: center;
float: left;
margin: 1em;
list-style-image: none;
background-color: #c0c0c0;
}
ul.thumb li a {
text-decoration: none;
color: #00f;
}
ul.thumb li a img {
}
/****** List ******/
.olist { list-style-type: disc; margin: 3px 0px 0px 15px; padding: 0px; text-align: left;}
.olist li {
padding: 0px; }
/****** Agent ******/
#hp_view_agent_photo {
padding: 5px;
display: inline;
float: left;
margin-right: 12px;
}
#hp_view_agent_details {padding: 5px;}
.hp_view_agent {
font-size: 13px;
text-align: left;
}
#hp_view_agent_desc {
margin: 10px 10px 0px 10px;
}
#hp_caption_agentname {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
/****** Address ******/
#hp_view_addr, #hp_co_addr {
margin: 6px;
font-size: 11px;
line-height: 15px;
}
/* Links */
a.hp_title:link, a.hp_title:visited {
font-size: 15px;
color: #CE1400;
font-weight: bold;
text-decoration: underline;
}
a.types_title:link, a.types_title:visited {
font-size: 15px;
font-weight: bold;
text-decoration: underline;
}
/* Types List of Hot Property */
.types_hp { margin: 3px 0px 0px 0px; padding: 0px; text-align: left;}
/* misc */
.clearboth {clear: both;}
/* Error - Empty, no property */
#hp_error_empty {text-align: center;}
The problem is with the two small images , all other pages are ok ( even the same page for another property, if there are two or more pics the problem appears. e.g http://tinyurl.com/yvvwqy ) |
|||||||