|
Hello everyone
I am new to the list and enjoyed reading the woes and sorrows. J/K :)
I am fairly new to building a site using pure CSS. After reading so much about CSS and that it seems that the trend is shifting to no tables, I finally gave in to trying to start on my current project with using CSS. Using tables, I would have completed implementing the site in a day. But with CSS, I took 3 days! Most of the time, trying to find out why Mozilla, Netscape, IE, Opera are trying to drive me to the grave by rendering different results.......
But despite all these, I can't deny the fact that I somehow enjoy the torture. CSS is rather fun once you immerse yourself into it especially when you are not an expert in it. Have been visiting Max Designs for guidance. I see his website more than my TV & dressing table these few days.
These 2 are the test pages: -
The browsers I used to test : IE 6, NS 7, Mozilla 0.7, Opera 7.02
Problems I can't solve: -
1) Opera only: The hover at the main navigation on the top of the page is not working.
2) Netscape only: For short page - Netscape refuses to show the background because the sidebar (column 2) is floated to the right and it is longer than the 1st column. It will show the background if the 1st column is longer but that is not what I want. I do not want to be restricted. I want flexibility of text length in either columns.
3) Netscape only: As the footer has top padding in order to position the contents in it, Netscape shows a white area above the footer. In order to fix it, I have to put a bottom padding for my content wrapper. It doesn't matter if it is 1px or 10px etc. As long as I put a bottom padding, Netscape is happy. Anyone knows why?
Below is the layout of the div I have for the contents section and the CSS for it: -
<div id="contentcontainer"> <div id="contentwrapper"> <div id="sidebar"></div> <div id="contents"></div> </div></div>
#contentcontainer {
position: relative;
width: 747px;
background-image: url(../../images/global/backgrounds/contents_tiler.gif);
background-color: #365878;
background-repeat: repeat-y;
background-position: left top;
}
#contentwrapper {
font-size: 1em;
text-align: justify;
line-height: 1.8em;
background-image: url(../../images/global/backgrounds/border.gif);
background-repeat: no-repeat;
background-position: right top;
padding-bottom: 1px; /*Fix NS 7 bug where it breaks footer from the contents container */
padding-top: 30px;
padding-left: 20px;
padding-right: 35px;
}
#sidebar {
margin-top: 30px;
float: right;
width: 25%;
}
#contents {
width: 70%;
background-position: right top;
padding-right: 3%;
}
Being my very 1st attempt using CSS and no tables to build a site, please do let me know if I did something wrong. I have no idea how safe it is to present this to the customer. Almost feel like presenting the table layout instead because I will know that nothing will go wrong with the layout. Thank you!
Best Wishes
Jaime | 
IncrediMail - Email has finally evolved - Click Here