[web] Percentage heights in HTML???

Started by
10 comments, last by swiftcoder 17 years, 11 months ago
So I am trying to get one on those nice border scemes going on my website, and it ain't working [smile] An early draft of the site is at www.DarkCoda.com, and you should be able to see what I mean on the index page. Each page has a top-level table, in a 3x3 grid, with the contnet in the center cell, and the border images around them. I use
<img src="images/main_border/left.jpg" width="25" height="100%" />

tags to stretch the left and right sections of the border to the full height of the content. As you will probably find, Internet Explorer for Windows just silently fails to stretch the image, which is really wierd, as IE for Mac, and every other Mac Browser (Safari, Camino, Firefox, OmniWeb) stretch it correctly. If anyone has Firefox or similar for Windows, could you check for me if the problem occurs? And if anyone has any suggestions as to why IE does this, or how to work around it, I would be extremely grateful. Edit: Fixed link. [Edited by - swiftcoder on April 28, 2006 10:41:00 AM]

Tristam MacDonald. Ex-BigTech Software Engineer. Future farmer. [https://trist.am]

Advertisement
You could (this is what I usually end up doing) put the images in the background-image: tag (stuck with CSS here), and give it a background-repeat: repeat-y; attribute.

That is,
CSS:.vertical_left{  background-image: url("left.gif");  background-repeat: repeat-y;}.vertical_right{  background-image: url("left.gif");  background-repeat: repeat-y;  }HTML:...<tr><td class="vertical_left"></td><td class="main_box">Content</td><td class="vertical_right"></td></tr>...


Also, on your site, Firefox doesn't stretch the vertical ones, either.
gsgraham.comSo, no, zebras are not causing hurricanes.
Quote:Original post by Avatar God
You could (this is what I usually end up doing) put the images in the background-image: tag (stuck with CSS here), and give it a background-repeat: repeat-y; attribute.

Ah, that is an easy workaround (although doesn't work with vertical gradients), and I can certainly live with it. Thanks very much.

Quote:Also, on your site, Firefox doesn't stretch the vertical ones, either.

This is getting me down, it isn't the first thing I have found that only works on Mac browsers. I don't see that there should be many differences between IE for Windows and IE for Mac, and even less so for Firefox!

Tristam MacDonald. Ex-BigTech Software Engineer. Future farmer. [https://trist.am]

I test my work on 5 browsers.
IE / Firefox / Opera / Netscape / AOL
It's a pain. The results used to be always different until I learned DOM and CSS
Wait - you actually get more consistent results with CSS? I still haven't figured out some of IE's quirks with CSS.
gsgraham.comSo, no, zebras are not causing hurricanes.
BTW i was talking about basic CSS, not some advanced image rendering CSS techniques.

I believe the core fundamentals of building a website is in how you structure your tables.
It's the tables that separate one content from another and that allows you to separate things. Thus, knowing how to give tables the correct border dimensions are crucial to a web developer. If you use the table tag and use the border/borderlightcolor/borderdarkcolor attributes, you're gonna be doomed. They are very inconsistant between browsers. Instead use CSS.
Here's an example. Before:
		<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLSPACING="0">		    <TR>		        <TD WIDTH="1">			   <IMG SRC=system/image/admin/menu/menu_big_separator.gif BORDER=0>			</TD>		        <TD WIDTH="60" NOWRAP>			   <TABLE BORDER="1" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" BORDERCOLORDARK="#CECFCE" BORDERCOLORLIGHT="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEDB"><TR><TD ALIGN="CENTER" onMouseOver='ClickChangeHover("CATEDB", "dbutton")' onMouseOut='ClickChangeHover("CATEDB", "fbutton")' class="fbutton" onClick='ClickChange("CATEDB")'>			   <A HREF="#" CLASS=NONE><IMG SRC=system/image/admin/menu/catalog.gif BORDER=0><BR>			   DB</A>			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="1" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" BORDERCOLORDARK="#CECFCE" BORDERCOLORLIGHT="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATECONFIG"><TR><TD ALIGN="CENTER" onMouseOver='ClickChangeHover("CATECONFIG", "dbutton")' onMouseOut='ClickChangeHover("CATECONFIG", "fbutton")' class="fbutton" onClick='ClickChange("CATECONFIG")'>			   <A HREF="#"><IMG SRC=system/image/admin/menu/configuration.gif BORDER=0><BR>			   Config</A>			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="1" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" BORDERCOLORDARK="#CECFCE" BORDERCOLORLIGHT="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEMEMBER"><TR><TD ALIGN="CENTER" onMouseOver='ClickChangeHover("CATEMEMBER", "dbutton")' onMouseOut='ClickChangeHover("CATEMEMBER", "fbutton")' class="fbutton" onClick='ClickChange("CATEMEMBER")'>			   <A HREF="JavaScript:SwitchAllLayer('MENU19')"><IMG SRC=system/image/admin/menu/customers.gif BORDER=0><BR>			   Member</A>			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="1" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" BORDERCOLORDARK="#CECFCE" BORDERCOLORLIGHT="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEORDER"><TR><TD ALIGN="CENTER" onMouseOver='ClickChangeHover("CATEORDER", "dbutton")' onMouseOut='ClickChangeHover("CATEORDER", "fbutton")' class="fbutton" onClick='ClickChange("CATEORDER")'>			   <A HREF="JavaScript:SwitchAllLayer('MENU21')"><IMG SRC=system/image/admin/menu/orders.gif BORDER=0><BR>			  Order</A>			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="1" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" BORDERCOLORDARK="#CECFCE" BORDERCOLORLIGHT="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEMODULE"><TR><TD ALIGN="CENTER" onMouseOver='ClickChangeHover("CATEMODULE", "dbutton")' onMouseOut='ClickChangeHover("CATEMODULE", "fbutton")' class="fbutton" onClick='ClickChange("CATEMODULE")'>			   <A HREF="#"><IMG SRC=system/image/admin/menu/modules.gif BORDER=0><BR>			   Module</A>			   </TD></TR></TABLE>			</TD>		        <TD WIDTH="1">			   <A HREF="#"><IMG SRC=system/image/admin/menu/separator.gif BORDER=0><BR>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="1" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" BORDERCOLORDARK="#CECFCE" BORDERCOLORLIGHT="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATESAVE"><TR><TD ALIGN="CENTER" onMouseOver='ClickChangeHover("CATESAVE", "dbutton")' onMouseOut='ClickChangeHover("CATESAVE", "fbutton")' class="fbutton" onclick='FormSubmit()'>			   <A HREF="#"><IMG SRC=system/image/admin/menu/logout.gif BORDER=0><BR>			   Save</A>			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="99%">			   <TABLE BORDER="0" CELLSPACING="0" CELLSPACING="0" ID="HIDE"><TR><TD ALIGN="CENTER">			   </TD></TR></TABLE>			</TD>		    </TR>		  </TABLE>

After:
		<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLSPACING="0">		    <TR>		        <TD WIDTH="1">			   <IMG SRC=system/image/admin/menu/menu_big_separator.gif BORDER=0>			</TD>		        <TD WIDTH="60" NOWRAP>			   <TABLE BORDER="0" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEDB" class="fbutton" onMouseOver='ClickChangeHover("CATEDB", "dbutton")' onMouseOut='ClickChangeHover("CATEDB", "fbutton")' onClick='ClickChange("CATEDB")' STYLE="cursor:hand"><TR><TD ALIGN="CENTER">			   <IMG SRC=system/image/admin/menu/catalog.gif BORDER=0><BR> DB			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="0" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATECONFIG" class="fbutton" onMouseOver='ClickChangeHover("CATECONFIG", "dbutton")' onMouseOut='ClickChangeHover("CATECONFIG", "fbutton")' class="fbutton" onClick='ClickChange("CATECONFIG")' STYLE="cursor:hand"><TR><TD ALIGN="CENTER">			   <IMG SRC=system/image/admin/menu/configuration.gif BORDER=0><BR> Config			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="0" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEMEMBER" class="fbutton" onMouseOver='ClickChangeHover("CATEMEMBER", "dbutton")' onMouseOut='ClickChangeHover("CATEMEMBER", "fbutton")' class="fbutton" onClick='ClickChange("CATEMEMBER");/--SwitchAllLayer("Member")--/' STYLE="cursor:hand"><TR><TD ALIGN="CENTER">			   <IMG SRC=system/image/admin/menu/customers.gif BORDER=0><BR> Member			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="0" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEORDER" class="fbutton" onMouseOver='ClickChangeHover("CATEORDER", "dbutton")' onMouseOut='ClickChangeHover("CATEORDER", "fbutton")' onClick='ClickChange("CATEORDER");/--SwitchAllLayer("Order")--/' STYLE="cursor:hand"><TR><TD ALIGN="CENTER">			   <IMG SRC=system/image/admin/menu/orders.gif BORDER=0><BR> Order			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="0" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATEMODULE" class="fbutton" onMouseOver='ClickChangeHover("CATEMODULE", "dbutton")' onMouseOut='ClickChangeHover("CATEMODULE", "fbutton")' onClick='ClickChange("CATEMODULE")' STYLE="cursor:hand"><TR><TD ALIGN="CENTER">			   <IMG SRC=system/image/admin/menu/modules.gif BORDER=0><BR> Module			   </TD></TR></TABLE>			</TD>		        <TD WIDTH="1">			   <IMG SRC=system/image/admin/menu/separator.gif BORDER=0><BR>			</TD>		        <TD ALIGN="CENTER" WIDTH="70" NOWRAP>			   <TABLE BORDER="0" BGCOLOR="#CECFCE" BORDERCOLOR="#CECFCE" WIDTH="100%" HEIGHT="36" CELLSPACING="0" CELLSPACING="0" ID="CATESAVE" class="fbutton" onMouseOver='ClickChangeHover("CATESAVE", "dbutton")' onMouseOut='ClickChangeHover("CATESAVE", "fbutton")' onclick='FormSubmit()' STYLE="cursor:hand"><TR><TD ALIGN="CENTER">			   <IMG SRC=system/image/admin/menu/logout.gif BORDER=0><BR> Save			   </TD></TR></TABLE>			</TD>		        <TD ALIGN="CENTER" WIDTH="99%">			   <TABLE BORDER="0" CELLSPACING="0" CELLSPACING="0" ID="HIDE"><TR><TD ALIGN="CENTER">			   </TD></TR></TABLE>			</TD>		    </TR>		  </TABLE>


The CSS That both should share
<STYLE TYPE='text/css'>  .fbutton { BORDER-BOTTOM: #CECFCE 1px solid; BORDER-LEFT: #CECFCE 1px solid; BORDER-RIGHT: #CECFCE 1px solid; BORDER-TOP: #CECFCE 1px solid; }  .dbutton { BORDER-BOTTOM: #ADAA9C 1px solid; BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #ADAA9C 1px solid; BORDER-TOP: #FFFFFF 1px solid; }  .rbutton { BORDER-BOTTOM: #F7EFE7 1px solid; BORDER-LEFT: #736D63 1px solid; BORDER-RIGHT: #F7EFE7 1px solid; BORDER-TOP: #736D63 1px solid; BACKGROUND-COLOR: #FFFFFF; }</STYLE>

So all in all it's better off getting rid of border attributes all together in tables and setting them purely with CSS border-bottom etc. Another thing is that the border="1" attribute actually has a border width of 2 px, which makes it damn hard. They both look the same on IE. But Firefox/Opera interprets things differently.

For example, without using any CSS or styles, if I want a border with 1 px this is the best I can do I believe:
<html><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"><p> </p><table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black">    <tr>        <td width="1223">            <p> </p>        </td>    </tr></table><p> </p></body></html>

Looks fine right?
But let's examine this closely...


<html><body bgcolor="green" text="black" link="blue" vlink="purple" alink="red"><p> </p><table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black">    <tr>        <td width="1223">            <p> </p>        </td>    </tr></table><p> </p></body></html>

Not cool.


<html><body bgcolor="green" text="black" link="blue" vlink="purple" alink="red"><p> </p><table border="1" cellspacing="0" bordercolor="black">    <tr>        <td width="1223">            <p> </p>        </td>    </tr></table><p> </p></body></html>

Again... not cool

Now I'm not sure if CSS is always better than HTML attributes, but for tables at least, CSS gives the user more accuracy.
<html><head><style>.mainTable{ BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; BORDER-RIGHT:red 1px solid; BORDER-TOP: red 1px solid; }</style></head><body bgcolor="green" text="black" link="blue" vlink="purple" alink="red"><p> </p><table border="0" cellspacing="0" class="mainTable">    <tr>        <td width="1223">            <p> </p>        </td>    </tr></table><BR>VS<BR><table border="1" cellspacing="0" bordercolor=red>    <tr>        <td width="1223">            <p> </p>        </td>    </tr></table><p> </p></body></html>



And also for input forms, let's say you have something like this
Name: [inputform]Address: [inputform]xxx: [inputform]xxxx2: [inputform]

Obviously, you want to align your input text forms. you can use table to align them, but sometimes the forms get very complex, and also especially when you're adding a new feature on an existing product, you don't want to make the tables from scratch again. You just want to slightly modify it. In that case, alignment can be a pain in the ass using the HTML size attribute. you the width using cascading style sheets. Much more accurate.

But again, IE is notorious for not fully supporting CSS image renderings and stuff. But I haven't found a good reason to use CSS image renderings yet. Opaque and all that complex pretty looking stuff just slows down the client computer, and looks real messy. Besides to use an elegant technique as opaque, *correctly*, you would have to be a real graphical artist.

and IE is much more forgiving than firefox or opera. Wrong syntax etc is easily forgiven on IE whereas firefox, NOOO...
Now, idk if microsoft made a good decision on that account but.. check this site out with both IE and firefox.
http://www.bogopausa.com/

Honestly, firefox is doing the "right" thing, but IE is doing the more "convenient thing" for the user. Really, internet users don't care if the browser is good or not. Whether it's interpretation of the html syntax is exact etc.. All they care about is that it's quick, convenient and opens all websites. and this is why I think IE wins.

The other multi-browser issue is fixed-position elements in CSS.
Again, all Mac browsers (including IE) display them correctly, but IE for Windows just inlines them instead.

Edit: Alright, I fixed the borders (as per your suggestion), and uploaded the new version.
Although the site is far from finished, and most of the content is placeholder content, would any of you like to comment on how the design of the site is shaping up? critisism accepted ;)

Tristam MacDonald. Ex-BigTech Software Engineer. Future farmer. [https://trist.am]

Well, I feel awkward and misled without a title image.

I hate to say it, because most people hate fixed-width sites... but it's too wide on my screen. With no side navigation panes or sidebars, there's just such a huge area for the text to stretch across. It makes the reading more difficult than it needs to be. In short, I would give the site a maximum width.

The shading is... clunky - on both the main site borders and the buttons. While cleanliness is a bit overdone these days, your site lacks the professional feel that it needs.

Regarding the buttons: they're long out of style. There is no interactivity with them (rollover), and they just don't look good. I realize this is a horrible comment, but I don't know what to tell you - it just needs a redesign.

Stopdesign, for example, has a fairly standard site. The top section is exactly what we've come to expect from a website, even if it isn't perfect. So do Plone and Jon Hedley's site. DotNetNuke has a more image based nav system, which is cool.

That's not to say we haven't all made clunky sites (me too), but the easier you can make the experience, the better.

Dead space between your buttons is a factor - users prefer to roll straight over the links. They like rollover changes. They like links that don't blend into the background, and they don't like it when your buttons move around - even slightly - between pages.

It would be nice, when you roll over "Websites", to have the sub-navigation links show up below it without actually clicking the main Websites link (LiveJournal does this).

On the about page, add some padding between your picture and the text, and consider a 1 or 2 pixel border on the picture.

A few spelling typos on the Graphic Design page: commissioning, scheme.

I'm not sure why there is a software section and a programming section, though. If you have enough content to make both worthwhile, then so be it. If not, consider culling the programming section.

Lastly, the site lacks color. I'm usually a fan of grays, but it works better in conjunction with other colors. Orange, blue, yellow, red - anything would help.

On the other hand, your site is fairly easy to navigate, gets the point across, provides an easy way to contact you, and features some of the best writing I've ever seen on a site. The explanations are simple, but really help the prospectives figure out what they need and how to get it.

So, despite my comments, I think it's a great site, but there are a few ways it could be better. I really do like it [grin]. Good luck with the business and site!

Also - are you really able to get those prices for web design? I've never tried freelancing (well, and charging) for web design yet, so I don't have the slightest idea.
gsgraham.comSo, no, zebras are not causing hurricanes.
Thanks for the feedback, great comments there.

The content is probably not what will end up on the finished site, I am just thinking about design here.

The current version resises to fill the screen, but the original was fixed width, and was sized for 1024x768 screens. I made this version scale in preparation for adding some dynamic content (blog style news, etc.), and I will definetely look into LiveJournal, thanks.

About the prices, well, I am in a rather super area in that regard. Living in St John, in the Virgin Islands, is kind of like living in a preserve of millionaires, each of whom wants a website for their next cottage industry ;)
So yes, I can get that sort of money (and the professionals down here are charging 2-4 times this for similar, although more polished sites).
Hopefully I can keep it up to help pay my way through college [smile]

Tristam MacDonald. Ex-BigTech Software Engineer. Future farmer. [https://trist.am]

I have given my site a small work over, if anyone wants to comment again...
One of the goals of the site is to display correctly on my clients 1024x768 screens under Internet Explorer (hopefully 5.0+), but this looks a little more alive than the last one.

Edit: I should probably start a new thread for this, but why waste this one [smile]

Tristam MacDonald. Ex-BigTech Software Engineer. Future farmer. [https://trist.am]

This topic is closed to new replies.

Advertisement