I have a problem

[newceylon]

Please help me !I have few problems with newly created web site.1. Images are not displayed in I.E 6.02. Navigation panel distorted in I.E 6 (based on different screen sizes)3. Footer section is distorted when the page content is small (with all browsers)I didn't include any java s. to the page.also not used any so called CSS hacks. I'm a newbie to web development but very interesting to learn it.any one can help me to solve above problems.?This is the url to web page : http://cnet.lkThis is the style :http://cnet.lk/cglayout.css

[Ingolme]

One thing I notice with your images is that you're putting "px" in the height and width attributes of your image.If you're going to use the height and width attributes, don't put units in them.I don't recommend the width, height or align attributes at all.Instead, use the width, height, and float CSS properties:<img style="height:180px;width: 300px; float: left" src="maligawa1.jpg" alt="dalada maligawa" />

[newceylon]

Thank you !One problem is solved.

[newceylon]

I also have another problem.The css navigation panel is not displayed as expected in I.E 6It adds extra space between navigation panel links.Please tell me a solution.Thanks.This is the url to web page : http://cnet.lkThis is the style : http://cnet.lk/cglayout.css

[rzea]

learn-happy, I think you have a serious HTML structure (also called "HTML semantic") issue: you are not separating the elements (tags) properly. This can bring so many problems to your work that you can't start imagining.The FIRST step when building a website is to have a VERY clean HTML semantic. Then you can start styling.Your problem

<p><img alt="dalada maligawa" height="180px" width="300px" src="maligawa1.jpg" align="left" /><br /><b>We:-</b><br />Are an island state ...<br /><br /> The island is 268 miles ...<br /><br /> Greek voyagers called us ...<br /><br />Sri Lanka’s population ...<br /><img alt="lanka girl" height="400px" width="400px" src="girl.jpg" align="left" /><br><br />...

What you need to do is to make each paragraph precisely that, paragraphs : <p>This is a paragraph</p>. If you do this you won't need to use <br /> to separate your paragraphs, they will be automatically separated.A solutionThis would be the correct code (this is just to guide you):

<img alt="dalada maligawa" height="180" width="300" src="maligawa1.jpg" align="left" /><br /><p><b>We:-</b><br />Are an island state ...<p/> <p>The island is 268 miles ...</p><p>Greek voyagers called us ...</p><p>Sri Lanka’s population ...</p><img alt="lanka girl" height="400px" width="400px" src="girl.jpg" align="left" />

Once you have your paragraphs created you proceed to float your images, for that you create a CSS class and then call it on your img tag.This is the HTML code for the images:

<img alt="lanka girl" height="400" width="400" src="girl.jpg" class="float-left" /><img alt="lanka boy" height="200" width="200" src="boy.jpg" class="float-right"  />

And this is the CSS:

.float-left {   float:left;}.float-right {   float:right;}

Also, remember to remove the px units from the HTML.Let me know if you need any help.

[Synook]

Just like to point out that the structure of the HTML is not entirely the same as the semantics of HTML, which is the ability of the code used to convey the content's meaning. Structure: valid. Semantics: Bad

<div class="1"><div class="2">Blah</div><div class="3">Blah blah blah</div></div>

Structure: valid. Semantics: Better

<div class="item"><h2 class="main_heading">Blah</h2><p class="standard">Blah blah blah</p></div>

[rzea]

110% agree with Synook.The first example is correct structural-wise, but not semantic-wise.Titles should be h1, h2, h3... etc.Paragraphs should be <p>Containers should be <div>Good explanation Synook