14 replies [Last post]
intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Hi, I still have this problem with getting my FB like box to simultaneously work and validate, however, taking that out of my code for now, I am happy to report that my code is valid and therefore I would like to ask for help with the following.

Here is the webpage. I want the main content table (to the right of the 147px sidebar) to take up 99% of the available space (with lax min-width (1000px) and max-width (1800px) restrictions), and it does so IE/Firefox/Opera. But in Chrome and Safari, the width of the table is compressed to take up about 66% of the available space. What gives? Puzzled

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

No replies?

Sad

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

C'mon now. It's the weekend.

For the nav column: You have both float and fixed position (FP); they are mutually exclusive. Lose one or the other. I'd advise losing the fixed position. I know print oriented designers love the idea of the menu always being on the screen, but it's a silly notion. People know how to scroll. Speaking of scrolling, an FP element does not scroll at all, ever. Anyone running his browser with less than a viewport height of 600px can't see all the menu. Again with the designers, it seems they have large screens, they run everything maximized, and they think everyone else does also. Silly notion.

For the #main, lose the min and max widths. Put them on the top level container. Also, do not float #main. You may keep the left margin, or set {overflow: hidden;}, which gives #main its own block formatting context. Everything else will adjust automagically if you let them.

For the table, set {width: 100%;}. Tables shrink wrap their content, and just how tight to wrap things is browser dependent. Usually, there's no problem, but you're using the table as a design element—a no-no. Structurally, that's a list and should be marked up as such.

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.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

*sheepish look* ... My bad!

Thank you so much for the reply, Gary - chastisement and all! Smile

For the #main, lose the min and max widths. Put them on the top level container.

Done!

Also, do not float #main. You may keep the left margin

Done!

For the table, set {width: 100%;}. Tables shrink wrap their content, and just how tight to wrap things is browser dependent. Usually, there's no problem, but you're using the table as a design element—a no-no. Structurally, that's a list and should be marked up as such.

I'm happy to recode our table content as a list to avoid a no-no! Smile However, I don't see how to do so. Isn't our content actually the rare case of real tabular data? Also, how would I duplicate the colspan=2 feature (that we're using for ads) using just divs?

Also, I don't quite follow the first two sentences - are Chrome and Safari essentially going, "oh, there's a table - we don't care how wide she wants the table; we're going to make it this wide"?

Screen size: My co-admin and I actually have discussed this question. We wouldn't mind catering to mobile phones, but our first priority is to make the site navigable on regular screens, the minimum resolution of which we understand to be 800*600. For mobile phones, we also face a plethora of other issues than resolution according to the W3 checker - notably our onslaught of images which we'll probably have to forgo showing on mobile phones. But we'd like to focus on making our site navigable on regular screens for now.

Finally: I concede that we are pig-headed about the fixed sidebar. Do we get to keep it now that we've dropped the float (and aren't concerning ourselves with moile phones)? Please? Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

With sugar on top?

Quote:

Please? Laughing out loud

Oh, OK; since you've asked nicely.

Do keep in mind that my Firefox, at 1024×768, has a viewport height of only 578px. Oops! too short for your menu. At 800×600, it's only 410px high. Oh, my, wouldn't it be nice if I could scroll to see the rest of the menu? Crying

Go to my inline-block gallery demo for list markup and associated css. Whatever you put into a table cell may be put into a list item.

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.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

And cherries!

Yay! Big smile Although I just tried 800*600 and I do see the problem. Puzzled Maybe we'll rethink the logo to make space for the rest. Or configure a separate stylesheet for low resolutions if that's possible?

List: Thanks for the link! I feel my mind really struggling to let go of the table conceptualization. Inline list items - okay, that part I understand. However, should I stop thinking in terms of rows of four items with equal width and all sharing the height of the longest item out of the four? And if so:

1) Currently we use colspan=2 and rowspan=2 for ads and for the infamous Facebook like box. How would you work those double-cell items into the list?

2) The two final rows in the current design are kinda dependent on the four cells per row design. How would you recommend I rethink the content of those two rows to adapt to the list design?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I have a hard time imagining

  • I have a hard time imagining a need for whatever ads go in those black cells. Why not just create another column to the right that's wide enough for that content—no way should anything be the width of colspan=2, nor are ads a part of the list of people.

  • The final two rows wouldn't be a part of the list. Put them in that new column, or leave them at the end, but not a member of the list.

Unless you have tabular data that you want to show, forget you ever even heard of tables.

The key to easy coding is to mark up the content according to what it is and how it is structured. The markup has has nothing to do with presentation until after it's done, and the presentation layer (the css) is added.

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.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Thanks again, Gary! Really

Thanks again, Gary! Really grateful for your assistance. Smile

I have a hard time imagining a need for whatever ads go in those black cells. Why not just create another column to the right that's wide enough for that content—no way should anything be the width of colspan=2, nor are ads a part of the list of people.

Wait, I'm puzzled by your mention of "whatever ads go in those black cells" - don't you see the ads (first row, third row, fifth row)? Puzzled

It's true that ads break the flow of the people (or typings, as we call them), but that's kinda intentional - placing them in the middle of the content so people see them (unlike in a separate column which they can ignore) and hopefully feel, "Well, okay, I suppose it's fair enough that I have to view one ad per 12 typings." Perhaps we could sneak them into the main content by dividing the list into separate lists with an element featuring an ad in between each? Like in the following example where I assume the screens fits four typings (T) per row:

---

T T T T
T T T T
T T T T
T T T T

ad

T T T T
T T T T
T T T T
T T T T

ad

T T T T
T T T T
T T T T
T T T T

final element with content currently in bottom two rows

---

That would be the way to do it, right?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Ad-block really works

Disabled adblock; saw the ads. I wonder when you last saw a newspaper story with ads in blocks within the story. There's story, then there's advertisements. In a magazine, there may be one column of story and five columns of ads, but they are not in blocks, interrupting the story. That's my story, and I'm sticking to it.

I suppose you could break the list into sections and intersperse ads. That would be preferable to the current method.

You should definitely remove this:

table.typings {
    background-color: #000000;
    ...
    }
For the many who use adblock, removing that background-color property will at least make the page seem less broken.

Now adblock is back on. Smile

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.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Heh, adblock. I am so

Heh, adblock. I am so oblivious to ads it has never even occurred to me to block them. Big smile People click on our ads though. Never ceases to amaze me. Laughing out loud

Thanks for the background-color tip! Apparently I have it because I couldn't get a border to render otherwise. I still can't - the following code doesn't work:

table.typings {
background-color: #ffffff; border-style: 1px solid #000000; 
}

Nor does it work if I remove the background color entirely. I have no idea why; it seems it should work to render a border?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Try {border: 1px solid

Try {border: 1px solid black;} (or #000, or #000000).

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.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

That worked! Thanks so much

That worked! Thanks so much for this tip (although of course I really need to get around to using lists instead Wink) as well as for all your other help. May I buy you a paperback on Amazon or something in return? Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Thanks for the offer, but I'm

Thanks for the offer, but I'm so far behind on my reading I'll never catch up. Instead, if you get to Dallas, you can buy the beers, I'll flirt outrageously, and you can tell all your friends back home about the Dirty Old Man you met. Wink

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.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 5 years 28 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

That's a deal! Cheers!

That's a deal! Party

Cheers! Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 4 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

gary.turner wrote: Disabled

gary.turner wrote:

Disabled adblock; saw the ads. I wonder when you last saw a newspaper story with ads in blocks within the story. There's story, then there's advertisements. In a magazine, there may be one column of story and five columns of ads, but they are not in blocks, interrupting the story. That's my story, and I'm sticking to it.

Always makes me chuckle when I read news sites and the stories continue 'after the break' ... and thanks to adblock there is no break!

Verschwindende wrote:
  • CSS doesn't make pies