ansaurus

Question

CSS - Styling seems to hamper URL display in Firefox

Answer 1

A:

to test this try

.sitename { width: 535px;
            overflow:visible;
}

if you see scrollbars try changing the width to an "em" based number

Rony 2009-06-30 00:02:04

Answer 2

+1 A:

This is the "culprit":

.sitename {
    width: 535px;
    overflow:hidden;
}

You are setting any element with a class of .sitename to have a specific width and hiding any overflow.

In addition to that, this is also part of the reason:

a.links2:link {
    ...
    width: 10px;
    ...
}

Not sure why you'd want to limit links to such a small width, but it is forcing the link text to wrap underneath which is then hiding "Miami" away because the overflow is hidden.

The code you pasted minus the above width declaration gives me what you want on Firefox.

This is a side note, but printing HTML like you are printing there is seriously ugly. It is also awfully easy to forget to close quotations and make silly mistakes just because it's hard to tell where you are. Consider heredoc syntax:

print <<<EOT
<table class="navbar">
  <tr>
    <td class='sitename'>
      <a href="http://{$row['site']}" class="links2">{$row['site']}</a>
    </td>
EOT;

Much better, right?

Paolo Bergantino 2009-06-30 00:02:31

The thing is, I only want the URL to display its first 535 pixels. After that, I want it to be hidden

2009-06-30 00:05:36

see my edit, changing the width from 10px should fix it.

Paolo Bergantino 2009-06-30 00:07:03

I took the 10px width off of links2, and it looked great until I tried something longer than 535 pixels, and the entire column ended up being longer than 535, thus changing my table design. So I tried using width: 535px; on links2, and it looks great and displays the full URL in Firefox. So it is now acceptable. However, it did change one thing: now the entire table cell is a hyperlink, and I would prefer that only the URL is a hyperlink. Any idea how I could do that? Thanks.

2009-06-30 00:18:51

As far as the indentation goes, I find properly indented HTML to be just as hard to read as improperly indented HTML. I actually prefer everything to be left justified because more code can fit onto the screen that way.

2009-06-30 00:21:25

John: I guarantee you about 99% of programmers will want to hunt you down if they were handed the code you are writing right now. If you don't want it indented, at the very least keep the heredoc syntax so you don't have to be escaping quotes and switching between single and double to add attributes and such. It's just the better practice, and that's not an opinion.

Paolo Bergantino 2009-06-30 00:23:46

As far as the width stuff goes, that is not happening for me.

Paolo Bergantino 2009-06-30 00:26:04

@Paolo: LOL. I have already had my code criticized. I am also printing this code inside of the <? and ?> of PHP, so that might be why it looks a little strange. By the way, thanks for the help. You gave me an acceptable solution to the problem, and I will give you credit for the answer. But do you know how to make it so only the URL is a hyperlink, and not the entire table cell?

2009-06-30 00:27:53

I know you're printing it inside PHP, but really there's no reason to be doing that way when PHP has so many other alternatives. I'm just trying to save you a headache in the future. :) As far as only the URL being a hyperlink, just remove the "display: block;" declaration you have. Without it, though, your height won't work so you would then have to compensate by giving the cell padding/margin instead.

Paolo Bergantino 2009-06-30 00:30:20

When I remove "display: block;" from the "table.navbar td a" attribute, the table is ruined for any URL longer than 535 pixels. What happens is the cell will expand to the length of the URL. I want the cell locked at 535 pixels.

2009-06-30 00:32:06

In that case you would have to wrap the link around a block level element. That's starting to get even uglier, though. Why are you using a table for this anyways? By the looks of it a list would be the more semantically correct element to be using.

Paolo Bergantino 2009-06-30 00:36:22

In that case, I guess I can just move ahead with the entire cell as a hyperlink. Thanks for the help!

2009-06-30 00:40:39

ansaurus

tags:

views:

answers:

CSS - Styling seems to hamper URL display in Firefox

related questions