...
PDA

View Full Version : Resolved Ie 7 & css

Jfish
11-22-2008, 06:45 PM
Hi,

I'm working on a website right now using a template found on the internet. Here is the problem I have : it's working perfectly under FF but with IE that's another story...

Here are the links to the print screens :
http://membres.lycos.fr/testwebmkt/klr/IE7.jpg
http://membres.lycos.fr/testwebmkt/klr/firefox.jpg

I have a style.css and an ie.css
style.css is as follow :

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #bcbcbc;
margin:0;
padding:35px 0 0 0;
background-image: url(../images/bg-body.gif);
background-repeat: repeat-x;
background-position: center top;
}
#main {
width:704px;
margin:auto;
background-image: url(../images/bg-main-top-bottom.gif);
background-repeat: no-repeat;
background-position: center bottom;
border:0;
padding:0 0 6px 0;
}
#top {
background-image: url(../images/bg-main-top-bottom.gif);
background-repeat: no-repeat;
background-position: center top;
padding:6px 15px 0 14px
}
#logo {
display:block;
float:left;
width:188px;
border-bottom:1px solid #FFFFFF;
}
#slogan {
display:block;
float:right;
width:466px;
border-bottom:1px solid #FFFFFF;
}
#interior {

background-image: url(../images/bg-interior.gif);
background-repeat: repeat-y;
background-position: center center;
width:704px;
/*height:300px;*/
}
#mid {
padding:0 15px 0 14px
}
#left {
display:block;
float:left;
width:188px;
}
#right {
display:block;
float:right;
width:466px;
}
#maintext {
display:block;
float:right;
width:426px;
border-top:1px solid #FFFFFF;
padding:15px 20px 10px 20px;
line-height:18px;
}
div#navbar {
width: 188px;
display:block;
float:left;
}
div#navbar ul {
margin:0;
padding:0;
}
div#navbar li {
list-style-type:none;
display:block;
float:right;
width:188px;
height:35px;
text-align:right;
border-bottom:1px solid #FFFFFF;
}
div#navbar li.button1 {
background-image: url(../images/bg-button-1.gif);
background-repeat: no-repeat;
}
div#navbar li.button2 {
background-image: url(../images/bg-button-2.gif);
background-repeat: no-repeat;
}
div#navbar li.button3 {
background-image: url(../images/bg-button-3.gif);
background-repeat: no-repeat;
}
div#navbar li.button4 {
background-image: url(../images/bg-button-4.gif);
background-repeat: no-repeat;
}
div#navbar li.buttonlast {
background-image: url(../images/bg-button-last.gif);
background-repeat: no-repeat;
}
div#navbar li a {
display:block;
float:left;
width:140px;
height:35px;
text-decoration: none;
margin:0;
padding:0;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
line-height:35px;
padding-right:45px;
background-image: url(../images/arrow-button.gif);
background-repeat: no-repeat;
}
div#navbar li a:link {
color: #FFFFFF;
}
div#navbar li a:visited {
color: #FFFFFF;
}
div#navbar li a:hover {
color: #FFFFFF;
text-decoration:underline;
background-image: url(../images/arrow-button-over.gif);
background-repeat: no-repeat;
}
h1, h2, h3, h4, h5, h6 {
margin: 15px 0;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
font-weight:bold;
}
p {
margin: 10px 0;
}
ul, ol {
margin: 15px 0 0 15px;
}
.clear {
clear:both;
}
a, a:visited {
color:#FFFFFF;
text-decoration:underline;
font-weight:bold;
}
a:hover {
color:#8ac1fa;
text-decoration:none;
}
#footer {
font-size: 11px;
color:#747474;
text-align:center;
padding:20px;
line-height:18px;
}
#footer a:link, #footer a:visited {
color:#747474;
text-decoration:none;
font-weight:normal;
}
#footer a:hover {
color:#747474;
text-decoration:underline;
}


And then here's the code to one of the HTML page (the pb is on all of them)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>About Us</title>
<meta name="keywords" content="keyword1, keyword2, keyword3, etc..." />
<meta name="description" content="Description of website here..." />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="main">
<div id="interior">
<div id="top">
<div id="logo"></div>
<div id="slogan">
<div align="center"><a href="index.html"><img src="images/logo.png" alt="" width="234" height="107" /></a></div>
</div>
</div>
<div class="clear"></div>
<div id="mid">
<div id="left">
<div id="navbar">
<ul>
<li class="button1"><a href="index.html">Accueil</a></li>
<li class="button2"><a href="partenaires.html">Nos Partenaires</a></li>
<li class="button3"><a href="clients.html">Nos Clients</a></li>
<li class="button4"><a href="infos.html">Plaquette</a></li>
<li class="buttonlast"><a href="formulaire.html">Demande d'informations</a></li>
</ul>
</div>
</div>
<div id="right"><img src="images/photo-main.jpg" alt="Business Solutions" /></div>
<div id="maintext">
<h1>Nos Partenaires</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris est. Donec mollis. </p>
<p>Morbi purus eros, luctus eget, scelerisque id, lobortis eu, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris est. Donec mollis. Morbi purus eros, luctus eget, scelerisque id, lobortis eu, lectus. </p>
<p align="right">&nbsp;</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer"> &copy; Apticap 2008| <a href="mailto:xxx">Contact</a><br />
<!-- This template is provided free of charge as long as you keep the link to http://webdevelopmentquote.com -->
<a href="http://webdevelopmentquote.com/" target="_blank" style="text-decoration:none;">Template</a> by WebDevelopmentQuote.com</div>
</body>
</html>


Thanks in advance!
Excavator
11-22-2008, 07:32 PM
Hello Jfish,
I'm assuming by the caps that the problem is images are not showing up in IE...

I pieced your code together here locally and really can't spot a problem with your images because I have no images.

Any chance you can just set up a test url?
Jfish
11-22-2008, 09:32 PM
Hi,

That's exactly the issue

Here is the test url :
http://membres.lycos.fr/testwebmkt/test/index.html

Thanks for helping
Excavator
11-22-2008, 10:29 PM
I changed some code to work a little better...
logo.png was actually a mis-named .jpg
I consolodated files and got rid of all the .js and Lycos crap...

And it still won't load the images in IE7


Have a look here - http://nopeople.com/Jfish/


I have to leave for a bit... will have another look at this later.
_Aerospace_Eng_
11-22-2008, 10:39 PM
I can see the images just fine in IE6, 7, and 8b2.
Jfish
11-22-2008, 11:23 PM
Hi

On the link you gave me it finally seems to work fine!!

The frame just goes off on the side while clicking on a link but I think I should be able to fix that, don't bother too much

If you can copy me the code, I'd be glad :)

Thanks :thumbsup:


EDIT : that's weird... Now even on my link I am able to see things fine with IE7...
Excavator
11-23-2008, 01:08 AM
Hi

On the link you gave me it finally seems to work fine!!

Yeah, it's working here now too. Needed to refresh I think.

If you want the code just save to a temp dir with
File/Save As from IE,
or File/Save Page As from FF.

Or you could just Page/View Source from IE7,
orView/Page Source (CTRL U) from FF.
Jfish
11-23-2008, 01:17 PM
So, I did a few other modifications and uploaded it on another free provider (0catch) and it's working a whole lot better excepting the ads that are everywhere but it was to test anyway...
http://testapticap.0catch.com/

So I think the morality here is that lycos sucks :D

Thanks for your help!!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum