• Locked
3 replies [Last post]
Thu, 2014-07-17 06:42
pirlo22
pirlo22's picture
Offline
newbie
Last seen: 8 years 26 weeks ago
Timezone: GMT+2
Joined: 2014-07-17
Posts: 1
Points: 5

Hi all,

On my work, I'm making a webshop for our company. They choose the software which automatically generates html so unfortunately I can't change the html.

When someone clicks on a product you go to the details page. On that page we want to show 8 product attributes (color, material, etc). In the original template these attributes are beneath each other in a row like this IE screenshot. I want to show them in two rows of four attributes like this FireFox screenshot.

With my CSS, I managed to make it work in FireFox, Chrome and Safari but not, ofcourse Wink, Internet Explorer.

I used the following CSS:

.tblProductAttributes tr {
  width: 300px !important;
  float: left !important;
}

The HTML code is as follow:

table class="tbl tblProductAttributes" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="tblLeft">
<td class="tblRight">
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>

I have to use all those !important attributes to overwrite the templates css. And as said, I can't change the HTML.

Does anyone have an idea to get it done in IE?

Thanks in advance!

Top
  • view bestreply
Tags:
Mon, 2014-07-28 19:27
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 23 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi pirlo22, Have you tried

Hi pirlo22,
Have you tried specifying a smaller width value, it may be the box model adding padding etc to the widths.
If so you could add box-sizing:border-box.
Or try changing the display porperty of the tr's to inline-block.

Top
Wed, 2014-07-30 11:37
#2
pirlo22
pirlo22's picture
Offline
newbie
Last seen: 8 years 26 weeks ago
Timezone: GMT+2
Joined: 2014-07-17
Posts: 1
Points: 5

Hi Tony, Thanks for your

Hi Tony,

Thanks for your reply!

I tried both of your suggestions but they didn't do the job unfortunately. Any other suggestions?

Top
Thu, 2014-07-31 16:37
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Give this a try

No warranty on IE,, but it should work.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  html, body {
    background-color: white;
    color: black;
    font: normal 100%/125% sans-serif;
    margin: 0;
    padding: 0;
    }
 
  p {
    font-size: 1em;
    margin: 1.25em 0;
    }
 
table {
    width: 606px;
    word-spacing: -.3em;
    }
 
tr {
    display: inline-block;
    width: 300px;
    word-spacing: normal;
    }
 
td {
    text-align: left;
    }
 
td:first-child {
    width: 150px;
    }   
 
  /*]]>*/
  </style>
</head>
 
<body>
  <table cellpadding="0"
         cellspacing="0"
         class="tbl tblProductAttributes">
    <tbody>
      <tr>
        <td class="tblLeft">label:</td>
 
        <td class="tblRight">value</td>
      </tr>
 
      <tr>
        <td class="tblLeft">label:</td>
 
        <td class="tblRight">value</td>
      </tr>
 
      <tr>
        <td class="tblLeft">label:</td>
 
        <td class="tblRight">value</td>
      </tr>
 
      <tr>
        <td class="tblLeft">label:</td>
 
        <td class="tblRight">value</td>
      </tr>
 
      <tr>
        <td class="tblLeft">label:</td>
 
        <td class="tblRight">value</td>
      </tr>
 
      <tr>
        <td class="tblLeft">label:</td>
 
        <td class="tblRight">value</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

You really do need to get a decent CMS. The one you have is not fit for purpose.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked