Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts

    first crack at non table website

    hi guys,

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

    http://www.searchthemarket.co.uk/

    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!
    Last edited by KevinG; 11-18-2005 at 04:34 PM.

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    The first step to working out some of the CSS bugs would be to correct the XHTML errors: http://validator.w3.org/check?uri=ht...arket.co.uk%2F
    OracleGuy

  • #3
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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">
    <tr>
    <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>
    </tr>
    </table>


    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>
    </div>

    this is the stuff in my css file for the above


    #MortgageTable{
    width: 100%;
    }

    #MortgageLayer{
    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

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    It looks quite mashed up in Opera, things are everywhere, and pushing themselves into places that they shouldn't be.

  • #7
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    can anyone give me a hand here to solve this. i'm seriously scratching my head.

  • #8
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    just looked at the site in opera

    any ideas?

  • #9
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #10
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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.

    -Shane

  • #11
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    http://validator.w3.org/check?uri=ht...Inline&No200=1

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

  • #13
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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.

  • #14
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    what can i use instead?

  • #15
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


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


    #menu {
    display:table;
    list-style-type:none;
    white-space:nowrap;
    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 {
    display:block;
    color:#FFFFFF;
    border:1px solid #fff; /* add a 1px white border around items */
    text-decoration:none;
    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 {
    color:#fff;
    background:#08c;
    }

    .lefted {
    margin:0 auto 0 0;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •