Different layout in IE and in Dreamweaver

Question

davy_yg 2 Posting Whiz

12 Years Ago

Hi,

I am trying to create to a nice looking site layout with css.

index.html

<div id="testimoni">
    
    <section class="testi-left">
    <figure><img alt="testimoni image" src="img/testimoni-img.jpg" />
    		<figcaption><strong>Michael Caine</strong><br><em>designme.com</em></figcaption>
    </figure>
    <article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p></article>
    </section>
    <section class="testi-left">
    <figure><img alt="testimoni image" src="img/testimoni-img.jpg">
    		<figcaption><strong>Michael Caine</strong><br><em>designme.com</em></figcaption>
    </figure>
    <article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p>
    </article>
    </section>
    <section class="testi-right">
    <figure><img alt="testimoni image" src="img/testimoni-img.jpg">
    		<figcaption><strong>Michael Caine</strong><br><em>designme.com</em></figcaption>
    </figure>
    <article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p>
    </article>
    </section>
           
    </div><!-- Akhir Testimoni -->

style.css

/* Testimoni */
#testimoni{
		border-bottom:2px solid #8697a6;
		margin:25px 10px 0; padding-bottom:30px;
		overflow:hidden;}
.testi-left{
		float:left; margin-right:20px;
		width:300px;}
.testi-right{float:right;width:300px;}
#testimoni figure{float:left}
#testimoni image{border:4px solid #8697a6}
#testimoni figcaption{text-align:center}
strong{font-weight:bold}
em{font-style:italic}
#testimoni article{
		float:right; margin-left:15px;
		width:185px;}

I wonder why my site layout view and Dreamweaver differ from my site layout view in IE. (I attached the pics). My intention is to create a site layout like my Dreamweaver pic attachment.

web-design

Edited 12 Years Ago by davy_yg because: n/a

6 Contributors
13 Replies
142 Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by teedoff

|-|x 126 Junior Poster in Training

12 Years Ago

What version of IE are you using?

What does it look like in other browsers like FireFox or Chrome?

Are you specifying a DocType definition tag?

Since you are using HTML5 tags like <figure> it will only display properly in recent browser versions that support HTML5.

|-|x 126 Junior Poster in Training

12 Years Ago

I don't believe IE7 will be capable of handling the HTML5 tags. I suggest either downloading IE9 (or the latest version of FireFox or Chrome) or replacing the HTML5 tags with HTML4 compatible tags, such as DIVs in order for your style sheets to function as expected in older browsers.

Depending on your target audience, you can't guarantee that the end users will be using the latest browser versions so you may want to look at backwards compatibility. I am not an HTML5 expert, but I'm sure there are plenty of fallback examples available.

|-|x 126 Junior Poster in Training

12 Years Ago

Its the specific tag names, such as article section figure figcaption etc. that are HTML5. You could change them to divs with a css class like

<div class="figure">

and change your css to match

#testimoni .figure{float:left}

hope this gives you the idea

|-|x 126 Junior Poster in Training

12 Years Ago

you need to do the same with the other tags section article header footer nav and also don't forget the closing tags </figure> should all be </div> although Arkinder is correct in that it is recommended to specify the exact doctype you are using, IE should actually choose the latest version it knows about that is compatible with your document when you use <!DOCTYPE html>

Arkinder commented: I find that it makes a little more sense semantically, and IE7 has never been known for behaving the way that it should. Regardless you're correct in the behavior of the HTML5 DOCTYPE. +7

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

I find that it makes a little more sense semantically, and IE7 has never been known for behaving the way that it should. Regardless you're correct in the behavior of the HTML5 DOCTYPE.

davy_yg 2 Posting Whiz · Answer 1 · 2011-12-06T11:05:35+00:00

I am using IE 7. It looks the same in Firefox.

I have the following code for the head:

<!DOCTYPE html>
<html lang="id"><! -- Mendefinisikan bahasa yang dipakai dalam dokumen -->
<head>
	<meta name="author" content="Aris_FM" /><!-- Menampilkan pembuat dokumen -->
    <meta charset="UTF-8" />
    <title>Organiz-r</title>
    <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    	<script src="modernizr-1.7.min.js"></script>
    <![endif]-->
</head>

davy_yg 2 Posting Whiz · Answer 2 · 2011-12-06T13:22:06+00:00

Well, how to downgrade to html4 tags? I can't tell different between the two. Practically, what should I change in my posted codes ?

davy_yg 2 Posting Whiz · Answer 3 · 2011-12-09T19:27:03+00:00

I updated the code. but the result still the same like before. nothing changes.

index.html

<!DOCTYPE html>
<html lang="id"><! -- Mendefinisikan bahasa yang dipakai dalam dokumen -->
<head>
	<meta name="author" content="Aris_FM" /><!-- Menampilkan pembuat dokumen -->
    <meta charset="UTF-8" />
    <title>Organiz-r</title>
    <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    	<script src="modernizr-1.7.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="header">

	<div id="header-container">
    	<header>
        	<h1><a href="#">Organiz-r</a></h1>
        </header>
        <nav>
        	<a class="current" href="#">Home</a>
            <a href="#">Tentang Kami</a>
            <a href="#">Kontak</a>
        </nav>
     </div>
</div><!--Akhir Header -->
<div id="container">
    <div id="intro">
    
    <img alt="intro image" src="img/intro.jpg">
    <article>
    	<h2>Kami Membantu Mengatur Keuangan Bisnis Anda</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque turpis ac nisl gravida porta. Suspendisse et vestibulum purus. Nullam sem ligula, interdum sed venenatis sit amet, pellentesque quis arcu. Curabitur tempor diam nec augue convallis sed tempor felis pellentesque. Nam nec lacus eu urna viverra molestie. Proin neque magna, porttitor at vestibulum et, molestie sed mi. Sed quis ipsum id massa suscipit euismod.</p>
    </article>
       
    </div><!-- Akhir Intro -->
    <div id="chat">
    	<p>Konsultasikan Masalah Bisnis Anda dengan Staff Kami</p>
    	<span class="ribbon-left"></span>
    	<span class="ribbon-bg-left"></span>
    	<span class="ribbon-right"></span>
    	<span class="ribbon-bg-right"></span>
    
    </div><!-- Akhir Chat -->
    <div id="testimoni">
    
    <section class="testi-left">
    <div class="figure"><img alt="testimoni image" src="img/testimoni-img.jpg" />
    		<div class="figcaption"><strong>Michael Caine</strong><br><em>designme.com</em></figcaption>
    </figure>
    <div class="article"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p></article>
    </section>
    <section class="testi-left">
    <div class="figure"><img alt="testimoni image" src="img/testimoni-img.jpg">
    		<div class="figcaption"><strong>Michael Caine</strong><br><em>designme.com</em></figcaption>
    </figure>
    <div class="article"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p>
    </article>
    </section>
    <section class="testi-right">
    <div class="figure"><img alt="testimoni image" src="img/testimoni-img.jpg">
    		<div class="figcaption"><strong>Michael Caine</strong><br><em>designme.com</em></figcaption>
    </figure>
    <div class="article"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p>
    </article>
    </section>
           
    </div><!-- Akhir Testimoni -->
    <div id="Info-wrapper">
    </div><!-- Akhir Info -->
    <footer>
    </footer>
</div>
</body>
</html>

style.css

/* Testimoni */
#testimoni{
		border-bottom:2px solid #8697a6;
		margin:25px 10px 0; padding-bottom:30px;
		overflow:hidden;}
.testi-left{
		float:left; margin-right:20px;
		width:300px;}
.testi-right{float:right;width:300px;}
#testimoni .figure{float:left}
#testimoni .image{border:4px solid #8697a6}
#testimoni .figcaption{text-align:center}
strong{font-weight:bold}
em{font-style:italic}
#testimoni .article{
		float:right; margin-left:15px;
		width:185px;}

Arkinder 93 Posting Pro in Training · Answer 4 · 2011-12-10T12:37:13+00:00

You are still using HTML 5 tags which do not exist to IE7. If you are wanting to switch your markup to HTML 4 make sure that you also change your DOCTYPE to HTML 4.01 Strict.

HTML 4 Reference

Regards,
Arkinder

ansaripk 0 Newbie Poster · Answer 5 · 2011-12-10T18:00:35+00:00

IE 7 can't understand the HTML5 tags e.g. <header> <nav> <article> <figure> you should use HTML 4 or choose a browser which can understand the HTML 5 tags like chrome, firefox and IE9.

davy_yg 2 Posting Whiz · Answer 6 · 2011-12-12T17:29:35+00:00

My new revision:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   
<html lang="id"><! -- Mendefinisikan bahasa yang dipakai dalam dokumen -->
<head>
	<meta name="author" content="Aris_FM" /><!-- Menampilkan pembuat dokumen -->
    <meta charset="UTF-8" />
    <title>Organiz-r</title>
    <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    	<script src="modernizr-1.7.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="header">

	<div id="header-container">
    	<header>
        	<h1><a href="#">Organiz-r</a></h1>
        </header>
        <nav>
        	<a class="current" href="#">Home</a>
            <a href="#">Tentang Kami</a>
            <a href="#">Kontak</a>
        </nav>
     </div>
</div><!--Akhir Header -->
<div id="container">
    <div id="intro">
    
    <img alt="intro image" src="img/intro.jpg">
    <article>
    	<h2>Kami Membantu Mengatur Keuangan Bisnis Anda</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque turpis ac nisl gravida porta. Suspendisse et vestibulum purus. Nullam sem ligula, interdum sed venenatis sit amet, pellentesque quis arcu. Curabitur tempor diam nec augue convallis sed tempor felis pellentesque. Nam nec lacus eu urna viverra molestie. Proin neque magna, porttitor at vestibulum et, molestie sed mi. Sed quis ipsum id massa suscipit euismod.</p>
    </article>
       
    </div><!-- Akhir Intro -->
    <div id="chat">
    	<p>Konsultasikan Masalah Bisnis Anda dengan Staff Kami</p>
    	<span class="ribbon-left"></span>
    	<span class="ribbon-bg-left"></span>
    	<span class="ribbon-right"></span>
    	<span class="ribbon-bg-right"></span>
    
    </div><!-- Akhir Chat -->
    <div id="testimoni">
    
    <section class="testi-left">
    <div class="figure"><img alt="testimoni image" src="img/testimoni-img.jpg" />
    		<div class="figcaption"><strong>Michael Caine</strong><br><em>designme.com</em></div>
    </div>
    <div class="artikel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p></div>
    </div>
    </div>
    <section class="testi-left">
    <div class="figure"><img alt="testimoni image" src="img/testimoni-img.jpg">
    		<div class="figcaption"><strong>Michael Caine</strong><br><em>designme.com</em></div>
    </div>
    <div class="artikel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p>
    </div>
    </div>
    <section class="testi-right">
    <div class="figure"><img alt="testimoni image" src="img/testimoni-img.jpg">
    		<div class="figcaption"><strong>Michael Caine</strong><br><em>designme.com</em></div>
    </div>
    <div class="artikel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet massa, vitae suscipit risus eleifend quis. Curabitur tristique convallis neque, vel dapibus est scelerisque ac. Donec convallis velit a risus dictum auctor. Curabitur vestibulum tempus leo ac imperdiet. Phasellus tincidunt faucibus leo sed auctor. Aliquam facilisis lacus libero, sagittis adipiscing dui. Sed luctus lectus ut massa bibendum sit amet consequat ligula varius. Etiam molestie libero vel mi pellentesque at venenatis felis aliquet. Fusce mattis arcu id libero tincidunt bibendum. </p>
    </div>
    </div>
           
    </div><!-- Akhir Testimoni -->
    <div id="Info-wrapper">
    </div><!-- Akhir Info -->
    <footer>
    </footer>
</div>
</body>
</html>

Still remain the same like before. Should I change:

section article header footer nav

to random name ?

|-|x 126 Junior Poster in Training · Answer 7 · 2011-12-13T04:36:16+00:00

I would do the same as you did for the figures.
note, you can specify multiple css classes where needed.
eg:

<div class="article"> ... </div>
<div class="section testi-left">

also class="header" is different from id="header" so you could do that, and your css would look like

#header {...}
#header .header {...}
#header .nav {...}

richardtj 0 Newbie Poster · Answer 8 · 2011-12-16T21:11:48+00:00

You need a main container and then 3 sub containers, each positioned inside the main container. That way, the main container can be the total width of the page and each sub container can be positioned inside the main container, positioned relative from left and top of the main container (3 horizontal boxes inside a main box). You can then use:

position:relative;

for each sub contained div inside the main div

teedoff 3 Posting Pro · Answer 9 · 2011-12-16T21:28:36+00:00

IE 7 is rather old, but still used.

An alternative to resorting back to html4 would be to use a bit of javascript to force older browsers to recognize the html5 tags.

http://code.google.com/p/html5shiv/