[Opgelost] html css verschillen IE Chrome en FF

rayring · Post by **rayring** » Wed Feb 15, 2012 5:58 pm

Ok ik weet het ik ben een redelijke nitwit op het gebied van html css etc. Ik hoop dat iemand mij de juiste richting op kan sturen.
Iemand waar ik een site voor maak wil een bestaande template gebruiken, echter deze is opgebouwd uit HTML tables, nu wil ik deze site poren naar CMSMS en dat is geen probleem. Echter op voorhand ben ik een image rotator aan het inbouwen, werkt op zich prima javascript werkt etc. Maar nu komt het op de styling aan in FF geen probleem ziet er goed uit, In Chrome schuift de slideshow 1 pixel op en in IE nog veel meer.

Ik ben uren bezig geweest met margin: 0 auto; text-aligns divs en noem maar op maar ik loop letterlijk vast.

Ik heb ook geprobeerd om tables om te zetten naar divs etc. maar ben het spoor echt bijster.

Wie kan mij op het juiste spoor zetten... eeehh ik weet dat ik een rommeltje heb gemaakt van de html en CSS maar zet 'm toch hieronder...

Website: http://goo.gl/XY3qR

Code: Select all

<!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>
<title>Ouadamlilfastfood.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css"/>

<__script__ type="text/javascript" src="js/jquery-1.3.2.min.js"></__script>
<__script__ type="text/javascript" src="js/jquery.cycle.all.min.js"></__script>

     <__script__ type="text/javascript">
$(document).ready(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  '2000',
        timeout: 5600,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});
</__script>

</head>
</__body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="images/index_01.gif" width="689" height="121" alt=""/></td>
        <td width="311" valign="bottom" background="images/index_02.gif"><table width="100%" border="0" cellspacing="5" cellpadding="0">
          <tr>
            <td height="96"><table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="6%"><img src="images/home.gif" width="12" height="11" alt=""/></td>
<td width="24%"><a href="#" class="white-link-underline">to main page </a></td>
<td width="7%"><img src="images/mail.gif" width="12" height="9" alt=""/></td>
<td width="21%"><a href="#" class="white-link-underline">send e-mail</a> </td>
<td width="6%"><img src="images/map.gif" width="11" height="12" alt=""/></td>
<td width="36%"><a href="#" class="white-link-underline">site map</a> </td>
</tr>
</table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><img src="images/index_03.jpg" width="1000" height="362" alt=""/></td>
  </tr>
  
<div id="slider">
        <!--start slideshow -->
        <div style="position: absolute;" id="slideshow">
          <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 1000px; height: 362px;" class="slider-item"><a href="#"><img src="images/header1.png" alt="icon" border="0" height="362" width="1000"/></a></div>

          <div style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 1000px; height: 362px;" class="slider-item"><a href="#"><img src="images/header3.png" alt="icon" border="0" height="362" width="1000"/></a></div>
          <div style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 1000px; height: 362px;" class="slider-item"><a href="#"><img src="images/header3.png" alt="icon" border="0" height="362" width="1000"/></a></div>
        </div>

        <!--end #slideshow -->
        <div class="controls-center">
          <div id="slider_controls">
            <ul id="slider_nav">
              <li><a class="activeSlide" href="#"></a></li>
              <!--Slide 1 -->

              <li><a class="" href="#"></a></li>
              <!--Slide 2 -->
              <li><a class="" href="#"></a></li>
              <!--Slide 3 -->
            </ul>
          </div>
        </div>
      </div>
    </div>
   <div class="clr"></div>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="images/index_04.gif" width="91" height="63" alt=""/></td>
        <td><a href="#"><img src="images/index_05.gif" alt="" width="147" height="63" border="0"/></a></td>
        <td><a href="#"><img src="images/index_06.gif" alt="" width="133" height="63" border="0"/></a></td>
        <td><a href="#"><img src="images/index_07.gif" alt="" width="133" height="63" border="0"/></a></td>
        <td><a href="#"><img src="images/index_08.gif" alt="" width="119" height="63" border="0"/></a></td>
        <td><a href="#"><img src="images/index_09.gif" alt="" width="124" height="63" border="0"/></a></td>
        <td><a href="#"><img src="images/index_10.gif" alt="" width="142" height="63" border="0"/></a></td>
        <td><img src="images/index_11.gif" width="111" height="63" alt=""/></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><img src="images/index_12.gif" width="1000" height="32" alt=""/></td>
  </tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="709" valign="top" bgcolor="#3B5A00"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td bgcolor="#3B5A00"><table width="100%" border="0" cellspacing="15" cellpadding="0">
              <tr>
                <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
                  <tr>
                    <td width="3%"><img src="images/index_15.gif" width="18" height="18" alt=""/></td>
                    <td width="97%"><h2>Welcome to our web site</h2></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
                  <tr>
                    <td width="3%"><img src="images/index_25.jpg" width="56" height="85" alt=""/></td>
                    <td width="97%"><strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong><br>
                      sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep.<a href="#"> Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo nemo enim</a> ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit. Duis autem vel eum iriure dolor in he<strong>ndrerit in vvdolore eu feugiat n</strong>ulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.</td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td bgcolor="#3B5A00"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="94%" bgcolor="#446800"><table width="100%" border="0" cellspacing="5" cellpadding="0">
                  <tr>
                    <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
                      <tr>
                        <td width="3%"><img src="images/index_36.gif" width="18" height="18" alt=""/></td>
                        <td width="97%"><h2>Service</h2></td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
                      <tr>
                        <td width="34%"><a href="#">&bull; Lorem Ipsum has been the <br>
                          &bull; Standard dummy text ever<br>
                          &bull; Make a type specimen book<br>
                          &bull; It has survived not only five</a></td>
                        <td width="66%"><strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong><br>
                          sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto beatae vitae dicta sunt, <a href="#">explicabo nemo enim ipsam voluptatem, quia  in hendrerit</a> in vvdolore eu feugiat nulla facilisis at vero eros et accumsan.</td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
                <td width="6%"><img src="images/index_34.gif" width="23" height="147" alt=""/></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td bgcolor="#3B5A00">&nbsp;</td>
          </tr>
        </table></td>
        <td width="262" valign="top" bgcolor="#355000"><table width="100%" border="0" cellspacing="15" cellpadding="0">
          <tr>
            <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
              <tr>
                <td width="3%"><img src="images/index_17.gif" width="18" height="18" alt=""/></td>
                <td width="97%"><h2>Special Offers!</h2></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
              <tr>
                <td width="95%"><strong>Lorem ipsum dolor sit met</strong><br>
                  sed diamaccusantium doloremque<br>
                  totam rem aperiam eaquep.</td>
                <td width="5%"><img src="images/index_22.jpg" width="53" height="50" alt=""/></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><a href="#"><img src="images/index_29.gif" alt="" width="72" height="16" border="0"></a></td>
          </tr>
          <tr>
            <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
              <tr>
                <td width="3%"><img src="images/index_17.gif" width="18" height="18" alt=""/></td>
                <td width="97%"><h2>About us</h2></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
              <tr>
                <td width="9%"><img src="images/index_40.jpg" width="63" height="42" alt=""/></td>
                <td width="91%"><strong>Lorem ipsum dolor sit met</strong><br>
sed diamaccusantium doloremque<br>
totam rem aperiam eaquep.</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><a href="#"><img src="images/index_29.gif" alt="" width="72" height="16" border="0"/></a></td>
          </tr>
        </table></td>
        <td width="29" valign="top" bgcolor="#3B5A00">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="61" background="images/index_44.gif">
      <table width="100%" border="0" cellspacing="10" cellpadding="0">
        <tr>
          <td width="65%" class="p1"><a href="#" class="white-link-underline"><strong>Terms of Use</strong></a><strong> | </strong><a href="#" class="white-link-underline"><strong>Privacy Statement </strong></a></td>
          <td width="35%" align="center">&copy; 2008 Your Corporation. All rights reserved</td>
        </tr>
    </table></td>
  </tr>
</table>
<__body>
</__html>

rayring · Post by **rayring** » Wed Feb 15, 2012 5:59 pm

Code: Select all

body {
background: #446800;
}

td {
	font: normal 11px Tahoma, Arial;
	color: #FFFFFF;
}

h1, h2, h3, h4, h5 {

    color: #FFFFFF;
    margin: 0px;
}


h1 {
    font-size: 35px;
}

h2 {
    font: normal tahoma, arial 24.45px;
}

h3 {
    font-size: 14px;
}


a {

font: normal 11px Tahoma, Arial;
color: #6aa200;
text-decoration: underline;
}

a:hover {

font: normal 11px Tahoma, Arial;
color: #6aa200;
text-decoration: none;

}

a.white-link-underline {	
	text-decoration: underline;
	color: #FFFFFF;
}

.white-text{
color: #ffffff;
text-decoration: none;

}
a.b1
{
font:  14px tahoma, Arial;
color: #fffea0;
text-decoration: none;
padding: 15px;
margin: 0px;

}
.p
{
padding: 0 0 0 20px;
}
.p1
{
padding: 0 0 0 30px;
}
.p2
{
padding: 150px 0 0 250px;
}
.bg1
{
background: #000000 url(images/index_10.gif) top no-repeat;
}
.bg2
{
background: #000000 url(images/index_10.gif) top no-repeat;
}
.bord
{
border: 1px solid #c5d85a;
}
.menu 
{
color:#8c247b;
vertical-align:top;
height: 35px;
padding: 10px 0 0 20px;
}
.menu a
{
color:#8c247b;
font: bold 11px  tahoma, Arial;
text-decoration: none;
}


.blye-text-underline {
color: #a257e0;
text-decoration: underline;
}

.blye-text-regular {
color: #a257e0;
text-decoration: none;
}

.yellow-text-regular {
color: #ffb400;
text-decoration: none;
}

.yellow-text-underline {
color: #ffb400;
text-decoration: underline;
}

.orange-text-regular {
color: #fe6b1d;
text-decoration: none;
}

.orange-text-underline {
color: #fe6b1d;
text-decoration: underline;
}
.broun-text-regular {
color: #de4e06;
text-decoration: none;
}

.broun-text-underline {
color: #de4e06;
text-decoration: underline;
}

.red-text-regular {
color: #8c247b;
text-decoration: none;
}

.red-text-underline {
color: #8c247b;
text-decoration: underline;
}
.black-text-regular {
color: #000000;
text-decoration: none;
}

.black-text-underline {
color: #000000;
text-decoration: underline;
}


.gray-text-underline{
color: #7c7c7c;
text-decoration: underline;
}
.gray-text-regular{
color: #7c7c7c;
text-decoration: none;
}

.green-text{
color: #6aa200;
text-decoration: none;
}

.green-text-underline{
color: #6aa200;
text-decoration: underline;
}

p.clr, .clr {
	clear:both;
	padding:0;
	margin:0;
	background:none;
	text-align: center;
}

/* Slider */

#slider {  width:1000px; padding: 0 0 0 0; position:absolute; text-align:center;margin:0 auto}

div#slideshow { float: left; width: 100%; height: 362px; margin-top:121px; margin-left:132px; }

.slider-item { width: 100% !important; height: 362px; }

.slider_content_inner img { border: none; }

.controls-center { width: 960px; margin-left: auto; margin-right: auto; }

#slider_controls { float: right; position: relative; background:url(images/pag_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:1000px; height:23px;}

#slider_controls ul { margin:0 auto; padding:2px 0; width:54px;}

#slider_controls ul li { margin: 0; padding: 0; list-style: none; }

#slider_controls ul li { float: left; display: block; }

#slider_controls ul li a { width: 10px; height: 10px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }

#slider_controls ul li a:focus { outline: none; }

#slider_controls ul li a:hover,

#slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; }

Jos · Post by **Jos** » Wed Feb 15, 2012 6:05 pm

woow das wel hogeschool tabellen nesten

Durf ik mij niet aan te wagen... zou me waarschijnlijk net zoveel tijd kosten om de site van de grond af aan op te bouwen zonder tabellen

timdebuurman · Post by **timdebuurman** » Wed Feb 15, 2012 6:33 pm

Hoi rayring,

Aan de hand van je live voorbeeld, dus niet nav van alle code hierboven, is dit de oplossing:

In de styles, onder

div#slideshow
haal je de float en de margins weg.

dan maak je de #slider zo:

#slider {
left: -500px;
margin: 0 auto 0 50%;
padding: 0;
position: absolute;
text-align: center;
top: 121px;
width: 1000px;
}

dan zit tie op z'n plek.

rayring · Post by **rayring** » Wed Feb 15, 2012 6:42 pm

Hoi TimdeBuurman,

Wow dit is super! Chrome en FF subliem... alleen in IE9 schuift de slide nog 3px naar rechts

timdebuurman · Post by **timdebuurman** » Wed Feb 15, 2012 7:58 pm

edit -> uitleg in volgende post

timdebuurman · Post by **timdebuurman** » Wed Feb 15, 2012 8:31 pm

Ik heb m.

Even voor de duidelijkheid.
De complete slider moet wel in een cel, dus

zet direct boven <div id="slider"> de <tr><td> :

Code: Select all

  </tr>
  
  <tr><td>

 <div id="slider">

Zet direct onder <div class="clr"></div> de </td></tr> :

Code: Select all

   <div class="clr"></div>

</td></tr>

  <tr>

In de stylesheet kan eigenlijk weer weg wat ik eerder zei dat erbij moest, deze word dan zo:

Code: Select all

#slider {
margin: 0;
padding: 0;
position: absolute;
top: 121px;
width: 1000px;
}

Ik denk dat het dan werkt.

rayring · Post by **rayring** » Thu Feb 16, 2012 10:02 am

Een betere buur bestaat niet, het werkt perfect SUPER BEDANKT

CMS Made Simple Forums

[Opgelost] html css verschillen IE Chrome en FF

[Opgelost] html css verschillen IE Chrome en FF

[Opgelost] Re: html css verschillen IE Chrome en FF

Re: html css verschillen IE Chrome en FF

Re: html css verschillen IE Chrome en FF

Re: html css verschillen IE Chrome en FF

Re: html css verschillen IE Chrome en FF

Re: html css verschillen IE Chrome en FF

Re: html css verschillen IE Chrome en FF