|
CSS - Css Works In Ie7, Firefox, Safari, Konqueror, Not In Ie6
I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css
Code:
<!--[if IE]>QU
<link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"
type="text/css">
<![endif]-->
Here is the menu system: Code: menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
'<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
'<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
'<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
'<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
'<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
'<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
'</li></ul></li></ul></div>';
(It rests inside of a javascript function) and here is the CSS: Code:
/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0; font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;}
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Any help with this is greatly appreciated. Thanks. Similar TutorialsCould someone explain me how to get rid of the gap at the bottom of this page? I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! Hi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them. EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing When I do this, it is centered on Firefox: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#encapsule {
margin-left: auto;
margin-right: auto;
}
#centered
{
text-align: center;
}
#centered table
{
margin: 0 auto;
text-align: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table> </div>
When I do the following, it centers it on Safari: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
}
#encase {
position: relative;
margin-left: auto;
margin-right: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks! EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots I have also included my HTML and CSS below. Thanks for your help! Code: /* Submenu */
.submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; }
.submenu a:active,.submenu a:focus{text-decoration:underline;}
.submenu ul{float:left;z-index:19; }
.submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;}
.submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;}
.submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;}
.submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;}
.submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;}
.submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;}
.submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;}
.submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;}
.submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;}
.grid_maindiv
{
position: relative;
border: 1px solid #cbc7b8;
overflow: hidden;
width: 105%;
font-family: verdana,arial;
}
.grid_table
{
background-color: white;
width: 100%;
font-size: 10pt;
}
.grid_table_header
{
background-image: url('../media/header.png');
height: 27px;
color: white;
font-weight: bold;
font-size: 14pt;
}
.grid_table_resize_row
{
background-image: url('../media/resize.gif');
width: 2px;
margin: 0px;
}
.grid_table_header_row
{
background-color: #EBEADB;
font-weight: bold;
cursor:pointer;
padding-left: 5px;
padding-bottom: 0px;
position: relative;
height: 18px;
overflow: hidden;
font-size: 10px;
cursor:pointer;
border-bottom:2px solid #cbc7b8;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
margin-bottom: 0px;
background-image: url('../media/column.png');
}
.grid_table_header_row_hover
{
font-weight: bold;
cursor:pointer;
padding-left: 5px;
padding-bottom: 0px;
position: relative;
height: 18px;
overflow: hidden;
font-size: 10px;
cursor:pointer;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
margin-bottom: 0px;
border-bottom:2px solid #f9b119;
background-color: #FAF9F4;
background-image: url('../media/column_on.png');
}
.grid_column_resize
{
cursor: e-resize;
width: 2px;
background-color: #cbc7b8;
border-bottom:2px solid #cbc7b8;
padding-bottom: 0px;
margin-bottom: 0px;
}
.grid_table_row_uneven
{
background-color: #EBEADB;
}
.grid_footer
{
background-color: #f9f9f9;
height: 20px;
color: #616161;
}
.grid_table_cell
{
padding-left: 2px;
position: relative;
border-bottom: 1px solid lightgray;
height: 28px;
overflow: hidden;
margin: 0px;
font-size: 10px;
}
Code: <body onmouseup="SetMouseDown(false);" topmargin="2">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0"
CELLPADDING="0">
<TR>
<TD WIDTH="50%">
<FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A> <B>
<A CLASS="topnav">text</A></B> <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A> <A
HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD>
<TD WIDTH="50%">
<P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT
SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> |
<A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD>
</TR>
</TABLE>
<HR SIZE=1 COLOR="#000000" WIDTH="100%">
<a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a>
<br>
<div class="submenu">
<ul>
<li><a href="view.php">Show All</a>
</li>
<li><a href="view.php?trash=1">View Trash</a>
</li>
<li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a>
</li>
<li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a>
</li>
<li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li> <form action="view.php" method="post">
<li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a>
</li> </form>
</ul>
</div>
<div class='grid_maindiv' id="grid" width=100%>
GRID
</div>
Greetings Well, what can I say. I'm a PC. I've been building these websites and have been validating them and all, and look great in IE 6 & 7. But when I finally get around to downloading the latest version (3.2) of Safari and Firefox, for some reason my background-color doesn't work right. Here's the site: http://www.freshrod.com/maryville/maryvillemo.html Have tried googling it, but no real answers yet. Anyone experience this before? Still learning CSS and trying to position simple text inside a layer on my clients site: The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox. What am I doing wrong here? Go to : http://www.fractiousmusic.com At the bottom left corner I am trying to position the Steady Systems text. IE - looks fine Firefox - slightly positioned to the right Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong. Please view source and let me know if its a code error. Thanks! Daniel hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox. I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow. Is there any clever fix for this? Cheers, whiteatom Hi All, I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b". I can't post links so the website is www (dot) authenticimpressions (dot) com I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out. What other information should I post or provide to get some help? Thanks in advance, I really appreciate it. I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone. Aaron <style type="text/css"> body { background-image: url('images/main_background.jpg'); background-color:#000000; background-repeat: no-repeat; margin: 0px; } .top_text { font-size: 14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFF00; font-weight:400; } .bold_grey{ font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } .small_text{ font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } form { font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px; font-weight:300; } .select { font-size:9px; height:15px; } .input { font-size:9px; height:16px; width:160px; } .zip { width: 94px; height:16px; font-size:9px; } .Footer_links{ color:#CCCCCC; font-size:14px; font-weight:300; text-decoration:none; } </style> I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all. Code: <div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div> What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long. hi The following CSS code works in Firefox, but not IE. The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE. Does anyone know what I need to change it to to fix the problem? Code: html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('images/gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('images/gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:560px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col
{
float: left;
width: 70%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol
{
float: left;
width: 94%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol a {
text-decoration:none;
}
#rescol td {
text-align: center;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2
{
margin: 0;
}
hr.c {
border: none 0;
border-top: 1px solid #ccc;
width: 100%;
margin-bottom: 10px;
text-align: center;
height: 1px;
}
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
Hello all, I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster. Thanks in advance. Hi all, My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place! If anyone would be kind enough to view: cavendish-cs.co.uk/beta/ You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look Any help greatly appreciated Thanks Craig You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code:
<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li>
<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>
<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>
And the CSS Alignment: Code:
#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}
Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. Hi- I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting): 01f086d.netsolhost dot com/yk/services dot html 01f086d.netsolhost dot com/yk/experience dot html 01f086d.netsolhost dot com/yk/principals dot html It seems to be the page length that is causing this, because on shorter length pages, there is no chunk. I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C). Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it! Hi guys. Straight to pictures: Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer. Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.) Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong. I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically: Code: .corner_topleft{
position: absolute;
top: 0px;
left: 0px;
...
}
and so on in that respect for the 4 corners and: Code: .border_left{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-repeat: x;
...
}
etc. for the borders. I have specified all the heights of the images. Now the problems in the pictures a #1: the left and right borders don't repeat down, #2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.) If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated. Regards, -Luke (: |
|||||||