PHWinfo banniere

Titres
PORTAIL ANNUAIRE ARTICLES COMPARATEUR HÉBERGEURS DEVIS FORUMS RÉDUCTEUR D'URL
Précédent   PHWinfo > Autres forums > Forum Programmation & Conception > macromedia.dyna.html > IE 7 layout probs (clearfix? )
 
S'inscrire FAQ Membres Recherche Messages du jour Marquer les forums comme lus
 
IE 7 layout probs (clearfix? )

Réponse
 
LinkBack Outils de la discussion
Vieux 14/04/2008, 22h22   #1
Fodderstompf
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut IE 7 layout probs (clearfix? )
Hi,

I've just started learning CSS after years of the dreaded tables.

I've 99% completed re-doing my site. However, when I checked it in IE 7 on
Windows I have a clearfix problem (I think). FF, Opera and Safari seem fine, at
least in OSX.

I have 2 columns nested in a content div, but in IE7 the content does not
stretch with the columns, and the footer jump to the right.

In another forum i learned about haslayout, but it does not seem to solve the
problem.

I DO notice that DW8 design view displays the site the same way, but I ignored
this at the time.

I've validated the CSS and HTML and they pass (apart from a java error).

Thanks!

HTML followed by CSS attatched?



<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Nec Media | Home | Design, Publishing &amp; Events</title>

<meta name="Description" content="Nec Media: Print &amp; Design, Magazines
&amp; Publishing, Event Management" />
<meta name="robots" content="index,follow" />

<link rel="shortcut icon" href="/images/icon1.ico" />

<link rel="stylesheet" type="text/css" href="necweb.css" />


<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
if ((obj=MM_findObj(objName))!=null) with (obj)
if (document.layers) {document.write(unescape(newText)); document.close();}
else innerHTML = unescape(newText);
}
//-->
</script>




</head>

<body id="homePage"
onload="MM_preloadImages('/images/homepic1.jpg','/images/homepic2.jpg','/images/
homepic3.jpg')">
<div id="wrapper">
<div id="masthead">
<a href="/index.html"><img src="/images/weblogo.gif" alt="Nec Media Homepage"
width="161" height="40" /></a>
<p>Magazines &amp; Publishing / Print &amp; Design / Event Management</p>

<div id="navContainer">
<div id="navigation">
<ul>
<li id="homePageLink"><a href="/index.html">Home</a></li><li
id="servicesPageLink"><a href="/services.html">Services</a></li><li
id="galleryPageLink"><a href="/gallery.html">Portfolio</a></li><li
id="eventsPageLink"><a href="/events.html">Events</a></li><li
id="contactPageLink"><a href="/contact.html">Contact</a></li>
</ul>
</div> <!-- end of nav -->

</div> <!-- end of nav cont -->
</div> <!-- end of mast -->
<div id="content" class="clearFix">

<div id="leftCol">
<p>NEC Media is a thriving design, events, and
publishing company based in the heart of Glasgow, Scotland. </p>
<p>Far more than just another faceless commercial
print business, NEC has strong links to the Glasgow community
and strives to bring its unique individualism to everything we
do&hellip;</p>
</div> <!-- end of leftCol -->


<div id="rightCol">
<div class="imagecenter">
<img src="/images/homepic1.jpg" alt="Nec Media" width="340" height="212"
class="botimage" id="neclarge" />
<a href="javascript:;"
onmouseover="MM_swapImage('neclarge','','/images/homepic1.jpg',1);MM_setTextOfLa
yer('txtlaya','','&lt&gt;Nec Media &amp; Events: Imagination in
Media&amp;hellip;&lt;/p&gt;')" onmouseout="MM_swapImgRestore()"><img
src="/images/homepic1t.jpg" alt="Nec Media" width="105" height="65"
class="thumb"id="necwee" /></a>
<a href="javascript:;"
onmouseover="MM_swapImage('neclarge','','/images/homepic2.jpg',1);MM_setTextOfLa
yer('txtlaya','','&lt&gt;We Are The People: Football Magazine&lt;/p&gt;')"
onmouseout="MM_swapImgRestore()"><img src="/images/homepic2t.jpg" alt="We Are
The People Magazine" width="105" height="65" class="thumb" id="watpwee" /></a>
<a href="javascript:;"
onmouseover="MM_swapImage('neclarge','','/images/homepic3.jpg',1);MM_setTextOfLa
yer('txtlaya','','&lt&gt;Glasgow\'s Finest: Bar &amp; Restuarant
Guide&lt;/p&gt;')" onmouseout="MM_swapImgRestore()"><img
src="/images/homepic3t.jpg" alt="Glasgow's Finest Magazine" width="105"
height="65" class="thumb" id="finestwee" /></a><br />
</div> <!-- end of rightCol -->
</div> <!-- end of center -->
<div id="txtlaya"></div>


</div> <!-- end of content -->


<div class="contentFooter">
&copy; 2007
<script type="text/JavaScript">
var d=new Date();
yr=d.getFullYear();
if (yr!=2006)
document.write("- "+yr);
</script>
Nec Media | <a href="/credits.html">Site Credits</a> </div> <!-- end of
footer -->
</div>
<!-- end of wrapper -->

</body>
</html>

=============

CSS

* {
margin: 0px;
padding: 0px;
}

html {
font-size: 100%;
}

body {
background: #f2f1f3 url(/images/282_purp_bk1.gif) repeat-x;
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
margin-top:10px;
margin-bottom:30px;
}

/* body margin-top controls space at top, was set to 10 */


#wrapper {
max-width:800px;
margin:0 auto;
padding: 0px 15px 0px;
position:relative;
}
/* wrapper padding also controls space at top, was set to 15 now 0 */


#masthead {
}

#masthead p {
color:#ffffff;
font: 1.2em Arial, Helvetica, sans-serif;
padding: 0;
}
/* added with 0 pad to bring next to mast */


#navContainer {
font: 1.2em Arial, Helvetica, sans-serif;
text-align: right;
padding: 0;
}
/* navcont top padding controls top space, was 20 now 10, now 0 to bring next
to mast */
/* keep bottom border but recolour? */
/* had to remove border-bottom 89 */


#navigation ul {
padding: 0 0 5px;
}
/* had to change bottom from 4 to 5 to remove line */

#navigation li {
display: inline;
}


#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
padding: 5px 10px;
position: relative;
margin-right: 1px;
}
/* nav margin right controls space between tabs, orig 5, even at 0 still
space, needs to set -5 or border changed */
/* nav background = tab colour */
/* should blend to white safari shows bottom border but not foxy, need to
remove border */

#navigation #contactPageLink a:link, #navigation #contactPageLink a:visited {
margin-right: 0px;
}

#navigation a:visited {
color: #222222;
}

#navigation a:hover {
text-decoration: underline;
background: #cccccc;
}

#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
#servicesPage #servicesPageLink a:link, #servicesPage #servicesPageLink
a:visited,
#galleryPage #galleryPageLink a:link, #galleryPage #galleryPageLink a:visited,
#eventsPage #eventsPageLink a:link, #eventsPage #eventsPageLink a:visited,
#contactPage #contactPageLink a:link, #contactPage #contactPageLink a:visited {
background: #ffffff;
border-bottom-color: #ffffff;
}

#content {
background: #ffffff;
color: #000000;
font: 1.1em Arial, Helvetica, sans-serif;
padding: 35px 20px 60px;

}
/* probably remove this main content border so it lines up with navcont */
/* drop shadow at bottom, bin? */
/* approx 770 made as 750, 20 pad+345+20 marg+345+20 (690 dub col length) */

#leftCol {
float: left;
width: 48.5%;
text-align: left;
padding-right: 10px;
}

#rightCol {
float: left;
width: 48.5%;
text-align: left;
padding-left: 10px;
}

.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* if cols the same list as one and use comma */

.contentFooter {
background: #ffffff;
font: 1em Arial, Helvetica, sans-serif;
height: 15px;
margin:0 auto;
padding: 5px 15px 10px;
}


#wrapper, #content, #leftCol, #rightCol, #masthead, #navContainer,
#navigation, #navigation ul, #navigation li {
zoom:1;
}


/* home page only */
#txtlaya {
position:absolute;
width:352px;
height:85px;
z-index:1;
left: 35px;
top: 352px;
visibility: visible;
}

#galltxt {
position:absolute;
width:314px;
height:83px;
z-index:1;
left: 35px;
top: 372px;
visibility: visible;
}

.captions {
font: 1em Arial, Helvetica, sans-serif;
padding-top: 2px;
}


#skipLink {
}


p {
font: 1.1em "Lucida Grande", "Lucida Sans Unicode", Lucida, Geneva,
sans-serif;
line-height: 1.5em;
margin-bottom: 1em;
}



h1 {
font: 2em Arial, Helvetica, sans-serif;
color: #000033;
}

h2 {
font: 1.5em Arial, Helvetica, sans-serif;
color: #000033;
line-height: 1.5em;
}

h3 {
font: 1.1em Arial, Helvetica, sans-serif;
color: #000033;
font-weight: bold;
line-height: 1.5em;
margin-bottom: 0.5em;
}

h4 {
}

blockquote {
}

cite {
}

img {
border: 0;
}

/* was 1px solid #000000 */

#masthead img, footer img {
border: 0;
}


.thumb {
  Réponse avec citation
Vieux 02/05/2008, 12h09   #2
Brian Wright_
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: IE 7 layout probs (clearfix? )
well this code works fine wjith my opera browser. IE has a lot of problems.
  Réponse avec citation
Réponse

« Discussion précédente | Discussion suivante »

Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages
Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


Fuseau horaire GMT +1. Il est actuellement 12h27.

PHWinfo - Forum spécialisé en hébergement - Guide Hébergeur - Guide Hébergement - Archives

Édité par : vBulletin® version 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC5 Tous droits réservés.
Version française #16 par l'association vBulletin francophone
PHWinfo est un site Éducation Sans Frontières ©2000-2008
Ad Management by RedTyger
©Tous droits réservés par les parties respectives
Page generated in 0,15689 seconds with 10 queries