0

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.

Edited by davy_yg: n/a

Attachments Dreamweaver.jpg 60.54 KB IE.JPG 68.59 KB
6
Contributors
13
Replies
14
Views
6 Years
Discussion Span
Last Post by teedoff
Featured Replies
  • 2
    |-|x 126   6 Years Ago

    you need to do the same with the other tags [iCODE]section article header footer nav[/iCODE] and also don't forget the closing tags [iCODE]</figure>[/iCODE] should all be [iCODE]</div>[/iCODE] although Arkinder is correct in that it is recommended to specify the exact doctype you are using, IE should actually choose the latest … Read More

1

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.

0

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>
1

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.

0

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

1

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

0

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;}

Edited by davy_yg: n/a

0

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

0

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.

2

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>

Votes + Comments
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.
0

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 ?

Edited by davy_yg: n/a

1

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 {...}

Edited by |-|x: elaboration

0

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

Edited by richardtj: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.