IE being retarded again problem.

[m300zx]

hello forum,

I have much to learn with CSS & html. this is probably a common issue but I've been fighting with it all morning. hoping someone here will be kind enough to educate me please.

when TD contains a very long string Firefox wraps it keeping everything within the TD box.

when TD contains a very long string IE does not wrap it, and everything after (subsequent TDs, the rest of TR) is pushed out way beyond the table's borders.

I'm really stuck and just being pointed in the right direction would be a great help & truly appreciated!

the code:

<div class="block">

<table class="">
    <tr>
        <th>Site Name</th>
    
        <th>Address</th>
        
        <th>Category</th>
    </tr>

<?

$contact_result = query_contacts( $where_clause );

$even = true;
while( $contact_row = details_from_contact_row( $contact_result ) ) {
    
    if( $even ) {
        $class = "";
    } else {
        $class = "_grey";
    }
    
    print "    <tr>\n";
    
    $id = $contact_row['ID'];
    
    $name = $contact_row['firstName']." ".$contact_row['lastName'];
    if( !trim( $name ) ) {
        $name = "[blank name]";
    }
        
    $dob = process_date($contact_row['dob']);

    $addr = array(
        $contact_row['line1'],
        $contact_row['line2'],
        $contact_row['city'],
        $contact_row['county'],
        $contact_row['postcode']
    );
    
    $address = concat( $addr );
    if( $address ) {
        $address .= ". "; }
        
    $address .= "<br />".$contact_row['country']; if( !$address ) { $address = "<br />"; }

    $telephone = $contact_row['telephone'];if(!$telephone){$telephone="<br />"; }
    $mobile    = $contact_row['mobile']; if( !$mobile ) { $mobile = "<br />"; }
    $email     = $contact_row['email'];  if( !$email  ) { $email = "<br />"; }
    $category  = $contact_row['category'];if(!$category){$category = "<br />"; }
    
    print "    <td class='noborder$class'><a href='persondetails.php?id=$id'>$name</a></td>\n";
//    print "    <td class='noborder$class'>$dob</td>";
//    print "    <td class='noborder$class'>$address</td>\n";
//    print "    <td class='noborder$class'>$telephone</td>\n";
//    print "    <td class='noborder$class'>$mobile</td>\n";
    print "    <td class='noborder$class'><a href='http://$email' target= '_blank'>$email</a></td>\n";
    print "    <td class='noborder$class'>$category</td>\n";
    
    print "    </tr>\n";
    
    $even = !$even;
    
}

?>

</table>

</div>
 
CSS code:

body {
    width: 600px;
    font-family: verdana, arial, helvetica, helv, sans-serif;
    font-size: 12;
    background: #CAE0FF;
}

h1 {
    border: 1px solid black;
       background-color: #EAFFFF;
    margin: 0px;
    padding: 5px;
    font-size: medium;
    color: #444444;
}

h2 {
    font-size: 12;
   
    font-style: italic;
    margin: 0px;
    padding-left: 10px;
    padding-bottom: 5px;
}

form {
    
    margin: 0px;
}

a {
    text-decoration: none;
    color: #770000;
    font-size: 12;
}

a:hover {
    color: #ff0000;
}

a.menu {
    color: #770000;
    font-size: 12;
    
}

a.menu:hover {
    color: #ff0000;
}

input.norm {
    width: 100&#37;;
}

input.main {
    width: 100%;
    background-color: #e7ffe7;
}

input.delete {
    background-color: #ff9999;
    font-size: 110%;
}

input.submit {
    font-size: 110%;
}

input.delete_small {
    background-color: #ff9999;
}

input.submit_small {
}

select.norm {
    width: 100%;
    height: 100%;
}

textarea {
    width: 100%;    
}

td.checkbox {
    text-align: center;
    border: 0px;
}

tr {
    width: 500px;
    }

td {
    
    padding: 2px 5px;
    margin: 0px;
    font-size: 12;
}

td.centre {
    text-align: center;
}

td.checkbox_grey {
    text-align: center;
    border: 0px;
    background-color: #f3f3f3;
}

td.noborder_grey {
    border: 0px;
    background-color: #f3f3f3;
}

th {
    padding: 2px 10px;
    background-color: #f3f3f3;
}

th.left {
    text-align: left;
}

div.block {
    
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 10px;
    font-size: 12;
}

div.block_no_print {
    
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 10px;
}

div.main_address {
    font-style: italic;
    font-size: 12;
}

address.menu {
    
    background-color: #fffff0;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 5px;
    font-style: normal;
    font-size: 12;
    
}

address.search {
    background-color: #f0f0ff;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 5px;
    font-style: normal;
    font-size: 12;
    margin: 0px;
}

address.statusbar {
    
    background-color: #eeeeee;
    border: 1px solid black;
    padding: 5px;
    font-style: normal;
    font-size: 12;
    
}

address.vanity {
    
    font-size: x-small;
    font-style: normal;
    text-align: right;
    padding: 5px;
    font-size: 12;
    
}

span.menu {
    border-right: 1px solid black;
    height: 100%;
    padding: 0px 6px;
    font-size: 12;
    
}

h2: {
    padding-top: 0px;
}

[rustybuddy]

you have a link to the page?

[m300zx]

no it's just on my box here at home. have screenshots. attaching...

[RyanReese]

Well screenshots nor PHP code will help us . We will need the generated source from that code (hit View>Source in your browser and paste it here)

Try to make it so we can see the problem even without your images (if you have any, I haven't looked through your code too much )

[m300zx]

hey thanks Ryan, & Rusty too.

most everything I've posted on this thread is some GNU code I've altered trying to fit my needs. then my code calls it with iframe.

here's that source to the IE7 browser:




<html>
<head>

<title>Links list</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type"text/css" href="print.css" media="print">

</head>

<body>

<h1>Links list</h1>

<address class='menu'>
<span class='menu'>Links list</span><span class='menu'><a class='menu' href='addperson.php'>Add link</a></span></address>
<div class="block">

<table class="">
<tr>
<th>Site Name</th>

<th>Address</th>

<th>Category</th>
</tr>

<tr>
<td class='noborder'><a href='persondetails.php?id=45'>something long</a></td>
<td class='noborder' width='200'><a href='http://http://www.sitepoint.com/forums/showthread.php?p=4593708#post4593708' target= '_blank'>http://www.sitepoint.com/forums/showthread.php?p=4593708#post4593708</a></td>
<td class='noborder'><br /></td>
</tr>

</table>

</div>

<address class='menu'>
<span class='menu'>Links list</span><span class='menu'><a class='menu' href='addperson.php'>Add link</a></span></address> <!--
<address class="vanity"><a href="http://myaddressbook.sf.net">myaddressbook.sf.net</a></address>
-->
</body>
</html>

like I said, looks good within FF. just IE's the problem. would appreciate any thoughts at all you might have Ryan.

p.s. stupid question: I don't suppose there's some sort of function one might put in their html header or CSS script that would deal with these issues is there?

[Paul O'B]

Do you have a doctype on your page?

If not add one and then re-test.

You should be using this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Or transitional if you have deprecated elements in your page (which you shouldn't be using anyway).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You haven't added any units to your font-size and they will be ignored once you add a doctype. Don't forget to tell the browsers what it is - e.g. font-size:12px

[m300zx]

well thanks Paul, but no dice. tried 'em both & no effect.

[deathshadow60]

Welcome to the inconsistency of long strings inside tables, and NO, there is no easy fix...

The only real solution being to insert breaks into the text or to use text with spaces in it for the link... Which is probably why I'd wrap the anchor around the text in the first column, or use the title of the thread you are wrapping to instead of the actual URL. Either that or you use WBR or some other breaking space inside the anchor, or you wrap it in a div set to a fixed width with overflow:hidden to just chop it off.

Though a little tip - if all your TD inside a TR are getting a class, put the class on the TR and not the TD.

Also wondering why you are abusing an address tag for what should be a pair of unordered lists.... I think compounding your problems is the outdated/outmoded/non-semantic markup.

[Paul O'B]

Hi,

If you use the table-layout:fixed algorithm you can use word-wrap:break-word for modern browsers (Firefox 3.6) and all versions of IE because word-wrap was originally proprietary IE code but is now in css3.

In tables cells however IE needs the word-wrap applied to the inner content and not the td.

This is working in all flavours of IE and Firefox 3.6 plus latest chrome and safari.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Links list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type"text/css" href="print.css" media="print">
<style type="text/css">
body {
    width: 600px;
    font-family: verdana, arial, helvetica, helv, sans-serif;
    font-size: 12px;
    background: #CAE0FF;
}
h1 {
    border: 1px solid black;
    background-color: #EAFFFF;
    margin: 0px;
    padding: 5px;
    font-size: medium;
    color: #444444;
}
h2 {
    font-size: 12px;
    font-style: italic;
    margin: 0px;
    padding-left: 10px;
    padding-bottom: 5px;
}
form {
    margin: 0px;
}
a {
    text-decoration: none;
    color: #770000;
    font-size: 12px;
}
a:hover {
    color: #ff0000;
}
a.menu {
    color: #770000;
    font-size: 12px;
}
a.menu:hover {
    color: #ff0000;
}
input.norm {
    width: 100&#37;;
}
input.main {
    width: 100%;
    background-color: #e7ffe7;
}
input.delete {
    background-color: #ff9999;
    font-size: 110%;
}
input.submit {
    font-size: 110%;
}
input.delete_small {
    background-color: #ff9999;
}
input.submit_small {
}
select.norm {
    width: 100%;
    height: 100%;
}
textarea {
    width: 100%;
}
td.checkbox {
    text-align: center;
    border: 0px;
}
table {
    table-layout:fixed;
    width:500px;
}
tr {
    width: 500px;
}
td {
    padding: 2px 5px;
    margin: 0px;
    font-size: 12px;
}
td.centre {
    text-align: center;
}
td.checkbox_grey {
    text-align: center;
    border: 0px;
    background-color: #f3f3f3;
}
td.noborder_grey {
    border: 0px;
    background-color: #f3f3f3;
}
th {
    padding: 2px 10px;
    background-color: #f3f3f3;
}
th.left {
    text-align: left;
}
div.block {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 10px;
    font-size: 12px;
}
div.block_no_print {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 10px;
}
div.main_address {
    font-style: italic;
    font-size: 12px;
}
address.menu {
    background-color: #fffff0;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 5px;
    font-style: normal;
    font-size: 12px;
}
address.search {
    background-color: #f0f0ff;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    padding: 5px;
    font-style: normal;
    font-size: 12px;
    margin: 0px;
}
address.statusbar {
    background-color: #eeeeee;
    border: 1px solid black;
    padding: 5px;
    font-style: normal;
    font-size: 12px;
}
address.vanity {
    font-size: x-small;
    font-style: normal;
    text-align: right;
    padding: 5px;
    font-size: 12px;
}
span.menu {
    border-right: 1px solid black;
    height: 100%;
    padding: 0px 6px;
    font-size: 12px;
}
h2 {
    padding-top: 0px;
}
td a, td, td div {
    word-wrap:break-word
}
</style>
</head>
<body>
<h1>Links list</h1>

<div class="block">
    <table class="">
        <tr>
            <th>Site Name</th>
            <th>Address</th>
            <th>Category</th>
        </tr>
        <tr class='noborder'>
            <td><div><a href='persondetails.php?id=45'>somethingunbrokensomethingunbrokensomethingunbrokensomethingunbrokensomethingunbrokensomethingunbrokensomethingunbroken</a></div></td>
            <td  width='200'><div><a href='http://http://www.sitepoint.com/forums/showthread.php?p=4593708#post4593708' target= '_blank'>http://www.sitepoint.com/forumsvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv/showthread.php?p=4593708#post4593708</a></div></td>
            <td><div>somethingunbrokensomethingunbrokensomethingunbrokensomethingunbrokensomethingunbrokensomethingunbrokensomethingunbroke</div></td>
        </tr>
    </table>
</div>

</body>
</html>

[m300zx]

hello Paul,

don't think I got notice of your post so seeing it for first time tonight.

anyway, plugged in your code and now all seems well, all seems great. you are the man!

many thanks for your time and expertise!

-mike