SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wierd Happens When Importing CSS File??

    Hi all,

    I am creating a website that is importing a .CSS file to help style the page elements. The problem I am getting is that when I insert the <select> tags straight after I include a <table>, Dreamweaver freezes, and the processor usage goes upto 100%. The <table> is making use of a class that has a set of attributes attached to it within the imported .css file. Now if I don't associate the <table> with a class, everything is ok. but when I attach the class to the table, thats when things go pear-shaped. I really can't see what the problem is. I'll include the code below so that people can analyse to see what the cause of the problem maybe.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="admincss.css" />
    </head>
    
    <body>
    
    <div class="h1">Churchill's Art &amp; Stationery - Admin Section</div>
    <hr size="2" color="#990000">
    
    <table cellspacing="1" cellpadding="5" height="100" border="0" bgcolor="990000" class="catTable">
    	<tr valign="top">
    		<td>
    			<li><b>Admin Home</b></li>
    			<li> <a href="categories.php" class="listDetails">Categories</a></li>
    			<li> <a href="products.php" class="listDetails">Products</a></li>
    			<hr size="1" color="000000">
    		</td>
    	</tr>
    	<tr>
    		<td height="80" valign="bottom"><hr size="1" color="000000"></td>
    	</tr>
    	<tr>
    		<td height="20"><li> <a href="products.php" class="listDetails">Log out</a></li></td>
    	</tr>
    </table>
    
    <select size="10"></select>
    
    <div style="float: none; height: 250px;"></div>
    <hr size="2" color="#990000">
    
    </body>
    </html>
    Here is the CSS code from the .css file that is related to this file.

    .catTable {
    margin: 10px;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    float: left;
    }

    a.listDetails {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    }


    Now if you check this code as it is (where the problem lies), and then take out the code class="catTable" then everything should be fine. So i'm assuming the problem lies with the attributes within the catTable class.

    This is really start to annoy me. Hope someone can help me.

    Cheers

    Tryst

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't really work out what was supposed to be going on.

    Try running the code through the validator and fix all the errors that you have. One of them may be causing things to go awry. (You haven't enclosed the list in a ul for a start.)

    Also floats should really have a width applied to them (although in some cases they do still seem to work).

    I loaded it all into DW anyway and couldn't get it to freeze.

    Is it just the problem with DW that you are concerned with? I assumed you've tried re-booting etc as my DW often freezes.

    Sorry I can't offer more help.

    Paul

  3. #3
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Paul, its seems I have solved the problem (not sure if its the right way about it, though :s). I have included a position:relative attribute in the catTable class. I was looking at your 3 column thread and in your .css code you state that its needed when using float. Why is this?

    Tryst

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    you state that its needed when using float
    It's not always needed but it does cure a lot of problems when things go missing.

    If the parent of a float has a position set then very often IE will need the float to also have a position relative. Otherwise the background of the parent element seems to get drawn over the float and can hide images etc or the float just doesn't display correctly.

    Occasionally, the position relative can have the opposite effect in older versions of opera so its worth checking other browsers are unaffected. in most cases though, adding position:relative helps ie work and doesn't spoil other browsers.

    I usually don't apply the position:relative as a matter of course unless the parent is also positioned.

    However it's usually one of the first things you should try if elements aren't displaying correctly as it cures numerous bugs in the right context.

    Sorry I can't be more specific but IE has so many bugs in relation to this that it's better just to use it when necessary.

    (And just to be awkward the reverse can sometimes be true. If child and parent elements have position relative set when they don't really need it then this can saometimes cause display problems in IE although this is quite rare.)

    Paul

  5. #5
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So when using a position:relative declaration, it means that the position of that element is dependant on its parent element position?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So when using a position:relative declaration, it means that the position of that element is dependant on its parent element position?
    No ! That's not correct. It would be true for position absolute.

    To clarify:

    Position:relative is only ever relative to itself. It will be moved the specified amount from where it would have been irrespective of its parents positioning properties. It is always relative to itself.

    On the other hand position absolute refers to a position from it's parent. It's parent will be the nearest ancestor that has a position property set (other than static which is the default.) If no ancestor with a position set exists then the parent is the root html element (body outside of margins).

    Adding position relative or position absolute to an element effectively makes a stacking context. Children elements will then take their absolute positioning from this parent as their starting point.

    This is the main reason position:relative is used in elements where no co-ordinates are specified. It gains a stacking context without altering the flow of the document because no co-ordinates have been set. Other elements can then be absolutely positioned within this relative elements which will move with the flow of the document.

    I believe it's the fact that adding position:relative to an element forces IE to handle the elements better.In some cases where a child does not have position relative set it appears that the parents elements background is drawn over the child thus hiding the float (or text and images).

    However, after all that there are other ways of beating this in IE and in a lot of cases it's the fact that the element doesn't have a width or height that causes the problem.

    A good fix for a lot of these problems is to add height:1% just for IE. (* html #element {width:1%})
    . As ie treats height as min-height anyway this fix has no bad side-effects and is better than using an unnecessary position:relative.

    You just have to try out what works in each occasion as the bugs are many and always slightly different.

    Paul

  7. #7
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "the bugs are many'

    One of the main reasons why I haven't fully adopted CSS There always seems to have to be work arounds to actually get the desired result. Image a world where all browsers treated CSS the same (slap!! wake up tryst!).

    Tryst


Bookmarks

Posting Permissions

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