View Full Version : first crack at non table website

11-18-2005, 05:32 PM
hi guys,

i am new to non table layouts and this is my first attempt


i am having problems with the posistioning and my browser checker is groaning about my css file. any tips or help would be greatly appreciated as i have been trying hard to understand all this css layouting.

thanks everybody.

i forgot to mention nothing is linked up yet!

11-18-2005, 08:14 PM
The first step to working out some of the CSS bugs would be to correct the XHTML errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.searchthemarket.co.uk%2F

11-18-2005, 09:03 PM
i have to be honest i have not managed to solve one of those problems.

can anyone help?

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td> <iframe src="http://www.mortgagelinked.com/common/topten.asp?ID=sxc" width="600" height="500" frameborder="0" marginwidth="1"></iframe>
<!--ILAYER FOR Netscape 4-->
<ilayer src="http://www.mortgagelinked.com/common/topten.asp?ID=sxc" width="600" height="500" border="0" topmargin="0" marginheight="0" leftmargin="1" marginwidth="1"></ilayer>
<!--End ILayer--> </td>

and replaced it with this

<div id="MortgageTable">
<div id="MortgageLayer"><iframe src="http://www.mortgagelinked.com/common/topten.asp?ID=sxc" </iframe>

<!--ilayer for netscape 4-->

<ilayer src="http://www.mortgagelinked.com/common/topten.asp?ID=sxc" </ilayer>
<!--end ilayer--></div>
this is the stuff in my css file for the above

width: 100%;

margin: 1px;
height: 500px;
width: 600px;
yet when used everything comes out wrecked.

is there another way to use iframes? i only use so that i can control the width of third party content

11-19-2005, 10:41 PM
before I delve in could you tell me what browser you use (IE [and what version] Mozila , FF, Opera, etc) and what screen resolution you use. I use Mozilla at 1152x and it's all messed up. Looking at it in IE6 it "seems" right but I dont know what it should look like.

11-20-2005, 11:37 AM
I use IE6 and 1024x768 (layout looks ok on my machine) - this layout is how i would like to fix it on all machines.

Layout for other browsers is giving me the headaches plus i am trying to get the design to stay fixed from 800x600 upwards (which currently it does not).

i tried to make the middle part of the website a percentage width but the content in the iframe is imported and difficult to assign a width (hence the iframes)

any help would be greatly appreciated.

11-20-2005, 11:41 AM
It looks quite mashed up in Opera, things are everywhere, and pushing themselves into places that they shouldn't be.

11-20-2005, 07:00 PM
can anyone give me a hand here to solve this. i'm seriously scratching my head.

11-20-2005, 11:47 PM
just looked at the site in opera :eek:

any ideas?

11-21-2005, 01:49 AM
You have already been told why it looks bad. You need to validate the code because there are a number of errors in the html and the css. You also did one cardinal sin and designed the site using IE. IE is old, buggy and non-standard. So your code is not viewable in any other browser. Always design your site in Firefox so your code is standard and written correctly. Then adjust your code for IEs quirks and bugs.

Why we won't help you until you do. (http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you)

11-21-2005, 05:51 PM
One big problems is that you need to set a minimum width to your center content column because if you resize your browser to a smaller width than your page allows, it puts the center column below your left column. Same with your navigation bar up top.


11-21-2005, 08:22 PM
Yes i noted that shaner. 800x600 it does drop horribly. but min widths - i seem to be finding conflicting info about how to assign them. is there a recommended way to apply such a tag?

I have installed firefox. so its a pringle and coke night until i have solved the layout issues.

with regard to the iframes - i be honest i am stuck. the general consensus seems to be to not use them, but what else can i do? its third party content that i am trying to control the dimensions of! i attempted in my earlier post to use css - but that caused a tsunami in my code.

these iframes are the crux of my W3C Quality Assurance so i would like to solve this once and for all. these are the errors i am getting:

Line 96 column 127: required attribute "cols" not specified.

...TextOfTextfield('CommentsBox','','')">Type comments here</textarea>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.


Line 128 column 36: there is no attribute "src".

<ilayer src="http://www.mortgagelinked.com/common/topten

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


Line 128 column 99: there is no attribute "width".

....com/common/topten.asp?ID=sxc" width="600" height="500" border="0" topmargin=


Line 128 column 112: there is no attribute "height".
...opten.asp?ID=sxc" width="600" height="500" border="0" topmargin="0" marginhei


Line 128 column 125: there is no attribute "border".
...sxc" width="600" height="500" border="0" topmargin="0" marginheight="0" leftm


Line 128 column 139: there is no attribute "topmargin".
...0" height="500" border="0" topmargin="0" marginheight="0" leftmargin="1" marg


Line 128 column 156: there is no attribute "marginheight".
...order="0" topmargin="0" marginheight="0" leftmargin="1" marginwidth="1"></ila


Line 128 column 171: there is no attribute "leftmargin".
...rgin="0" marginheight="0" leftmargin="1" marginwidth="1"></ilayer>


Line 128 column 187: there is no attribute "marginwidth".
...eight="0" leftmargin="1" marginwidth="1"></ilayer>


Line 128 column 190: element "ilayer" undefined.
...ht="0" leftmargin="1" marginwidth="1"></ilayer>
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

as stated this is my first crack at css layout so i am learning. any help or tips is greatly appreciated.

11-22-2005, 12:22 AM

got it down to 6 errors. 11.20pm. i'm tired. any tips welcome. nearly there.

11-22-2005, 12:04 PM
That ilayer will never validate. Theres no such thing as an ilayer, its just something that netscape made up for NN4 and ditched in NN6.

11-22-2005, 12:12 PM
what can i use instead?

11-22-2005, 03:02 PM
using firefox i have managed to figure most of my previous layout probs aside from these styles which i cannot seem to position correctly. the site look ok in IE but in firefox you can see the problem.

float: left;
width: 55%;
background-color: #999999;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 10px;
padding-left: 5px;
height: 100%;

#menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #FFFFFF;
position: fixed;
left: 140px;
width: 400px;
height: 15px;
padding-top: 0;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
text-align: left;
border-top-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFFFFF;
* html .menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */
padding:0 2px; /* fix bug in IE for border spacing */
.menu li {
display:table-cell; /* ignored by IE */
* html .menu li {
display:inline; /* for IE only */
.menu a, .menu a:visited {
border:1px solid #fff; /* add a 1px white border around items */
background-color: #00CC33;
padding-top: 4px;
padding-right: 16px;
padding-bottom: 4px;
padding-left: 16px;
* html .menu a, * html .menu a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
.menu a:hover {

.lefted {
margin:0 auto 0 0;