Back To Website Design Forum

browser compability

  • jappu
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 09, 2010
  • Posts: 5
  • Status: Offline

Post December 9th, 2010, 11:16 am

I managed to put together a simple web site for my art work that works the way I want with IE8 but not properly with IE6 or IE7 or other browsers. The problem is that with IE6 and IE7 and other browsers (except Safari 3.0 for some reason) the pages don't show correctly: I get an empty space on all pages (beside the left navbar) where the 'content block' should be because it moves DOWN. Probably something wrong with my CSS sheet. i am trying to get the web site working also with IE6 and IE7, and the later versions of Firefox, Safari and Chrome. I am new to this but I thought I give it a try. :fantastisch04:

Here is the CSS style sheet below:

CSS Code: [ Select ]
#wrapper {
  margin-right: auto;
  width: 90%;
  margin-left: auto;
  position: fixed;
}
#navbar {
  font-weight: bolder;
  float: left;
  text-align: left;
  width: 160px;
  background-color: #cccccc;
  font-size: larger;
  font-style: normal;
}
#content {
  font-family: Arial,Helvetica,sans-serif;
  background-color: #cccccc;
  width: 1100px;
  padding-left: 125px;
}
h1 {
  font-family: Arial,Helvetica,sans-serif;
  font-size: medium;
  text-align: center;
  margin-top: 0px;
  padding-top: 15px;
}
h2 {
  font-size: 3em;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bolder;
}
  1. #wrapper {
  2.   margin-right: auto;
  3.   width: 90%;
  4.   margin-left: auto;
  5.   position: fixed;
  6. }
  7. #navbar {
  8.   font-weight: bolder;
  9.   float: left;
  10.   text-align: left;
  11.   width: 160px;
  12.   background-color: #cccccc;
  13.   font-size: larger;
  14.   font-style: normal;
  15. }
  16. #content {
  17.   font-family: Arial,Helvetica,sans-serif;
  18.   background-color: #cccccc;
  19.   width: 1100px;
  20.   padding-left: 125px;
  21. }
  22. h1 {
  23.   font-family: Arial,Helvetica,sans-serif;
  24.   font-size: medium;
  25.   text-align: center;
  26.   margin-top: 0px;
  27.   padding-top: 15px;
  28. }
  29. h2 {
  30.   font-size: 3em;
  31.   font-family: Arial,Helvetica,sans-serif;
  32.   font-weight: bolder;
  33. }



Here is the code (from KompoZer) for the title page:

HTML Code: [ Select ]
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Xxxx Xxxx - homepage</title>
<link rel="stylesheet" href="style-sheet" type="text/css">
</head>
<body>
<div id="navbar"><br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbsp;
<a href="index.html">Home</a><br>
&nbsp;
<a href="artist.html">Artist</a><br>
&nbsp;
<a href="night-1.html">Night</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <a href="night-2.html">6-11</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-3.html">12-16</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-4.html">17-21</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-5.html">22-26</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-6.html">27-31</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-7.html">32-36</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-8.html">37-42</a><br>
&nbsp;
<a href="man-1.html">Man</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <a href="man-2.html">3-6</a><br>
&nbsp;
<a href="various-works.html">Various Works</a><br>
&nbsp;
<a href="contact.html">Contact</a><br>
</div>
<div id="content">
<h1>Copyright 2010. xxxx xxxx. All rights reserved.</h1>
<br>
<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Xxxx Xxxx<br>
</h2>
<br>
<img style="width: 800px; height: 642px;" alt="Holes" title="Holes"
src="images/holes.jpg"><br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Holes, 1997, oil on canvas, 16x20 inches<br>
<br>
<br>
<br>
<br>
<br>
</div>
<br>
<br>
</body>
</html>
  1. <html>
  2. <head>
  3. <meta content="text/html; charset=ISO-8859-1"
  4. http-equiv="content-type">
  5. <title>Xxxx Xxxx - homepage</title>
  6. <link rel="stylesheet" href="style-sheet" type="text/css">
  7. </head>
  8. <body>
  9. <div id="navbar"><br>
  10. <br>
  11. <br>
  12. <br>
  13. <br>
  14. <br>
  15. <br>
  16. &nbsp;
  17. <a href="index.html">Home</a><br>
  18. &nbsp;
  19. <a href="artist.html">Artist</a><br>
  20. &nbsp;
  21. <a href="night-1.html">Night</a><br>
  22. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <a href="night-2.html">6-11</a><br>
  23. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-3.html">12-16</a><br>
  24. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-4.html">17-21</a><br>
  25. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-5.html">22-26</a><br>
  26. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-6.html">27-31</a><br>
  27. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-7.html">32-36</a><br>
  28. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="night-8.html">37-42</a><br>
  29. &nbsp;
  30. <a href="man-1.html">Man</a><br>
  31. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <a href="man-2.html">3-6</a><br>
  32. &nbsp;
  33. <a href="various-works.html">Various Works</a><br>
  34. &nbsp;
  35. <a href="contact.html">Contact</a><br>
  36. </div>
  37. <div id="content">
  38. <h1>Copyright 2010. xxxx xxxx. All rights reserved.</h1>
  39. <br>
  40. <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  41. Xxxx Xxxx<br>
  42. </h2>
  43. <br>
  44. <img style="width: 800px; height: 642px;" alt="Holes" title="Holes"
  45. src="images/holes.jpg"><br>
  46. <br>
  47. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  48. Holes, 1997, oil on canvas, 16x20 inches<br>
  49. <br>
  50. <br>
  51. <br>
  52. <br>
  53. <br>
  54. </div>
  55. <br>
  56. <br>
  57. </body>
  58. </html>
Moderator Remark: Added [code] tags
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 9th, 2010, 11:16 am

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post December 11th, 2010, 2:33 am

For starters, I don't see any id attribute declaring your "#wrapper".
You have a lot of "<br>" tags and "&nbsp;" spaces. Replace these with some css margin or padding properties.

Also, I highly suggest reading this tutorial written by one of our members on multi column layout. It should help you out quite a bit.

Multi-Column Layout Using CSS Float
Use your words like arrows to shoot toward your goal.
  • jappu
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 09, 2010
  • Posts: 5
  • Status: Offline

Post December 11th, 2010, 10:18 am

Thanks mindfullsilence. The tutorial by dM you suggested is great - clear as mountain water. It encourages me to take a different approach with this and try to write the code without using KompoZer (or other WYSIWYG web design software). ... by the way I added the id attribute for "#wrapper' and changed "padding-left" values for the "#content" element which I thought was the problem, but this didn't help.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post December 11th, 2010, 2:44 pm

You'll basically need to rewrite a lot of your code for your site to work. Your website essentially has 4 parts all wrapped within a "wrapper" div:
  • Header
  • Sidebar
  • Content
  • Footer

So consider the following html to divide your content:

HTML Code: [ Select ]
<div id="wrapper">
 
<div id="header">
</div>
 
<div id="sidebar">
</div>
 
<div id="content">
</div>
 
<div id="footer">
</div>
 
</div> <!-- close "wrapper" -->
 
  1. <div id="wrapper">
  2.  
  3. <div id="header">
  4. </div>
  5.  
  6. <div id="sidebar">
  7. </div>
  8.  
  9. <div id="content">
  10. </div>
  11.  
  12. <div id="footer">
  13. </div>
  14.  
  15. </div> <!-- close "wrapper" -->
  16.  


After you separate your content as the example above shows, you can move each div around with css:

CSS Code: [ Select ]
#wrapper {
width: 960px;
}
 
#header {
height: 150px;
}
 
#sidebar {
width: 250px;
float: left;
display: inline; /* display inline is applied to floated elements so they works in IE6 */
}
 
#content {
width: 710px; /* your wrapper width minus your sidebar width */
}
 
  1. #wrapper {
  2. width: 960px;
  3. }
  4.  
  5. #header {
  6. height: 150px;
  7. }
  8.  
  9. #sidebar {
  10. width: 250px;
  11. float: left;
  12. display: inline; /* display inline is applied to floated elements so they works in IE6 */
  13. }
  14.  
  15. #content {
  16. width: 710px; /* your wrapper width minus your sidebar width */
  17. }
  18.  


Once you have your section, you can add your visible content inside of their appropriate divs. For instance, your navigation would go inside your "sidebar" div.
A navigation bar is essentially a list of items, so why not use a list to declare them? It would look something like this:

HTML Code: [ Select ]
<div id="sidebar">
 
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="artist.html">Artist</a></li>
<li><a href="night-1.html">Night</a>    <!-- here, you can embed another list for your indented link items -->
        <ul>
        <li><a href="night-2.html">6-11</a></li>
        <li><a href="night-3.html">12-16</a></li>
        <li><a href="night-4.html">17-21</a></li>
        <li><a href="night-5.html">22-26</a></li>
        <li><a href="night-6.html">27-31</a></li>
        </ul>
</li> <!-- close list item -->
<li><a href="man-1.html">Man</a></li>
</ul> <!-- close "navbar" -->
 
</div> <!-- close "sidebar" -->
 
  1. <div id="sidebar">
  2.  
  3. <ul id="navbar">
  4. <li><a href="index.html">Home</a></li>
  5. <li><a href="artist.html">Artist</a></li>
  6. <li><a href="night-1.html">Night</a>    <!-- here, you can embed another list for your indented link items -->
  7.         <ul>
  8.         <li><a href="night-2.html">6-11</a></li>
  9.         <li><a href="night-3.html">12-16</a></li>
  10.         <li><a href="night-4.html">17-21</a></li>
  11.         <li><a href="night-5.html">22-26</a></li>
  12.         <li><a href="night-6.html">27-31</a></li>
  13.         </ul>
  14. </li> <!-- close list item -->
  15. <li><a href="man-1.html">Man</a></li>
  16. </ul> <!-- close "navbar" -->
  17.  
  18. </div> <!-- close "sidebar" -->
  19.  


Continue adding content within each div section and play around with the css, if you have any further troubles let us know.
Use your words like arrows to shoot toward your goal.
  • jappu
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 09, 2010
  • Posts: 5
  • Status: Offline

Post December 11th, 2010, 5:56 pm

Thank you mindfullsilence! I will look into this and let you know how it goes. Much appreciated.
  • jappu
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 09, 2010
  • Posts: 5
  • Status: Offline

Post December 17th, 2010, 7:57 pm

I finally found time to get back to this and now the website works in all the main browsers. My thanks to mindfullsilence. ... Now that I got the hang of this, I would like to know a good way to put captions under images. The images, 5 to 8 per page, are often different sizes and shapes and laid side by side. Does anyone have any suggestions?
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post December 20th, 2010, 10:34 am

jappu wrote:
I finally found time to get back to this and now the website works in all the main browsers. My thanks to mindfullsilence. ... Now that I got the hang of this, I would like to know a good way to put captions under images. The images, 5 to 8 per page, are often different sizes and shapes and laid side by side. Does anyone have any suggestions?

When I want to do this I use a spans but a divs would work but it would use a slitley different code not harder just different. the code for a span would be:
HTML
Code: [ Select ]
<span class="wrapper"><img src="your/img/path.jpg" /><span class="text">Your caption would be here.</span></span>

and the css
Code: [ Select ]
.wrapper {display:block;float:left;width:auto;height:auto;}
.text{width:100%;}
  1. .wrapper {display:block;float:left;width:auto;height:auto;}
  2. .text{width:100%;}

or float:right; if you wanted also you may want to set a margin and background to it say a 5px margin and white background? just so you can see it, also style the text so that its a good size.
^__^
  • jappu
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 09, 2010
  • Posts: 5
  • Status: Offline

Post January 4th, 2011, 9:40 pm

Thanks, tastysite, for the advice.

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 164 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.