DIV Tags

[FusionComputers]

I'm attempting to complete a site design that uses <div> tags to layout the site. Aside from IEs lack of support for fixed positioning (which I've been close to fixing), there is a sizing issue across different screen resolutions.

Start with a screen resolution of 1024x768. If you would be so kind as to visit http://www.fusioncomputer.net and notice the margins (should be ~5px all the way round the page). Then change resolutions to anything higher than 1024x768. Then refresh the page. The margins are lost, when I'm using relative sizing. The CSS controlling the site is at http://www.fusioncomputer.net/css/css.css

I'd appreciate any help on this problem, before I go back to using Tables to layout my sites.

[WebJoel]

There is some issue with margin not being applied if the screenwidth is equal-to or less-than the defined width. I'd use padding:5px;, so that the 'space' of 5px is 'inside' the container, not 'outside' the container. You'll have acknowledge the padding as part of the width though, if the width is fixed. I guess you're using percentages, so this shouldn't matter.

Note that IE doesn't like any margin-bottom on BODY. If you encounter this, just use padding-bottom:5px (or however much px) on BODY (all browsers obey).

I see that there is an uncleared float maybe... your copyright is 'behind' the iFRAME(??) Is that what you intended? It looks unweildy when you scroll the content and the copyright is occluded by content.

p.s. -it works, but that is some of the most butt-ugly css I have seen in awhile. Waaaaay too much whitespace. I'd close-up some gappage. Remember, 'whitespace' in a css file is bandwidth-sapping as it is 'a bit' of information. Optimize the css.

[FusionComputers]

It's actually not an iFRAME, but rather a DIV with overflow set to auto. The HTML and body elements have had their scrolling set to hidden.

That's another issue. I developed the site to be displayed in 1024x768 on my laptop, since I was away from home, and thus, my desktop. Now, IE also doesn't support the minheight property of CSS, so I can't make things look good for users running 800x600 and (I hope not) below.

I'll agree about the whitespace. I use PHP Designer 2007 and have my tab space set to 2 spaces. Looks ok in that, but every time I tab, it physically writes full tabs (~4-5 spaces) to the CSS. I'll do a search and replace on it.

[FusionComputers]

Why do DIVs have to be such headaches? Tables are a lot easier to work with when laying out a site, and they generally display how you want them to. Anyone else have any suggestions relating to how I can get my css (http://www.fusioncomputer.net/css/css.css) to work with IE6, Firefox, Mozilla, and Opera and still display everything how I want it to no matter the screen resolution?

[FusionComputers]

I'm still having that copyright information run up the screen and the div containing it just bleedin disappears. This is BS.

[WebJoel]

Relax... take it easy. You know, -DIVs ARE tons easier to use than TABLEs. Blame IE, -not CSS. -There is a learning process of course. You get there.
I'll take another look at it, -it is without a doubt something simple. :)

-In time, you will learn how to 'shorthand' the CSS, so as to be more compact and therefore, easier to read.

This:.text
{
background-color : #000000;
border-style : solid;
border-color : #404040;
border-bottom-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-top-width : 1px;
color : #ffffff;
font-family : Tahoma;
font-size : 10pt;
font-weight : normal;
margin-bottom : 0px;
margin-left : 2px;
margin-right : 0px;
margin-top : 0px;
text-decoration : none;
}


becomes:
.text {
color:#fff;
background-color:#000;
border:1px solid #404040;
font-family:tahoma 10pt normal;
margin:0 0 0 2px;} and says exactly the same thing. :)

[FusionComputers]

I separated the div tag CSS from the original file. http://www.fusioncomputer.net/css/css2.css now contains only the DIV CSS.

[FusionComputers]

Ok, give me a hex math lesson here. How can #ffffff accurately become #fff and still work properly?

And the arguments for the margin statement go margin-top, margin-bottom, margin-right, and margin-left?

[WebJoel]

You have some potentially problematic HTML here, too:

<body>
<!-- Container div !-->
<div class="contCell"><!-- Banner div !-->
<div class="bannerCell"><img src="images/CroppedBannerFC75.jpg"....

"comment" tags are written as:

<!-- comment -->, not <!-- comment !--> Firefox will eventually be unhappy with this and you will spend much time trying to figure out why...

[FusionComputers]

Thank yas. I learned html way back when that second exclamation point wasn't even considered "nonstandard"

[WebJoel]

:D understood.

-Anyway, -I have this looking fairly awesome for IE, the copyright stays put. Right now I have issue with the overflow div 'squishing upwards' in Fx. I'm going to give this a rest tonight and priority for Monday morning. :)

I will likely optimize some things while still tring to use your external files. Clearly you have a good grasp of code as most of what I am seeing, either works or very easily could. Mostly, I am trying to get my head around the nesting of some DIVs which doesn't seem necessary. That is shoving in extra padding and extra margins that I need to account for.

[FusionComputers]

I've run into some trouble with my site. I'm taking it offline for maintenance. I'll edit my includes to oust those nested DIVs.

[FusionComputers]

On my backend, 800x600 looks like crap. Probably does on the frontend too.

[WebJoel]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href=
"http://www.fusioncomputer.net/css/css2.css">
<link rel="stylesheet" type="text/css" href=
"http://www.fusioncomputer.net/css/css.css">
<title>Fusion Computers -- Genoa, OH -- Home</title>
<base href="http://www.fusioncomputer.net/">
<style type="text/css">
body, html {padding:5px 5px 40px 5px; height:101%;}
</style>
</head>
<body>
<!-- Container div -->
<div class="contCell" style="height:100%; position:relative;"><!-- Banner div -->
<div class="bannerCell" style="position:relative;"><img src="images/CroppedBannerFC75.jpg"
alt="Fusion Computers"></div>
<!-- Left Navigation Container -->
<div class="leftNavCell" style="float:left; position:relative; top:5px; width:160px; border:1px solid #454545;">

<div class="navDiv" style="position:relative;
text-align:center; width:140px; margin:15px auto;">
<h1 title="navigation links" style="font-size:1.2em; color:white; text-align:center; margin-top:15px; width:100px; margin:0 auto 15px auto;">
Navigation</h1>

<a href=
"index.php?id=1">Home</a><br>
<a href="index.php?id=2">About Us</a><br>
<a href="index.php?id=3">Contact Us</a><br>
<a href="index.php?id=4">Location</a><br>
<a href="index.php?id=5">Products</a><br>
<a href="index.php?id=6">Services</a><br>

<a href="index.php?id=7">Useful Links</a><br></div>

</div>

<div style="clear:right;"></div>

<!-- Main Content Container -->
<div class="" style=
"position:relative; left:2px; top:5px; width:auto; height:65%; overflow-y:scroll; margin-right:20px; border:1px solid gray; border-left:0 none; padding:10px;">
<p class="dateP">Wednesday, May 24, 2007 - 05:11 PM</p>
<p class="newsP">I've applied the W3Cs Strict Schema to the Web
site which has had the effect of fixing the rest of my display
issues. Firefox seems to ignore margins with the BODY element when
using fixed positioning. Now, there is a 5px margin all around in
both browsers.</p>
<p class="sigP">- Michael<br>
<br></p>
<p class="dateP">Wednesday, May 23, 2007 - 07:00 PM</p>

<p class="newsP">The design issues are fixed. IE6 doesn't like
fixed positioning, apparently. I made use of a Cascading Style
Sheet hack to get things to display properly. If you're authoring a
Web site with fixed positioned DIV tags, Google for CSS Hacks.
That's how I got things working. I also fixed a logic error with my
Titling system. Something only I'd notice, probably, but it's
fixed.</p>
<p class="sigP">- Michael<br>
<br></p>

<p class="dateP">Tuesday, May 22, 2007 - 02:49 PM</p>
<p class="newsP">I'm aware of some design issues with Firefox. I'm
working on fixing those now.</p>
<p class="sigP">- Michael<br>
<br></p>
<p class="dateP">Monday, May 21, 2007 - 07:34 AM</p>
<p class="newsP">I fixed a few nuances with my local version of PHP
and the server's. I don't have access to MySQL or MSSQL on this
server, so I've largely had to wing it with COM, ADODB, and a
tidbit of ODBC. Needless to say, PHP's support for this method of
database access (primarily going through COM) is rather slim. But,
I must say that I've done a fairly decent job with what little
there is available. I'll be releasing a tutorial on this Web site
on how to use Access with PHP soon.</p>

<p class="sigP">- Michael<br>
<br></p>
<p class="dateP">Sunday, May 20, 2007 - 10:50 PM</p>
<p class="newsP">The backend I've implemented for this Web site is
largely finished. I have a working administration script that
integrates seamlessly with the site design. The way this has turned
out allows me to see exactly what my changes look like with a
simple refresh. The only instance where I need to upload any files
now is if I change my scripts.</p>

<p class="sigP">- Michael<br>
<br></p>
<p class="dateP">Friday, May 18, 2007 - 07:50 AM</p>
<p class="newsP">I've begun implementing a backend using PHP for
this Web site. The work is progressing nicely. The <a href=
"index.php?id=3">Contact Us</a> page now has a custom made form to
get ahold of me. I think it's easier than firing up an e-mail
program, or dialing a phone. I get the messages immediately. Use it
for any questions, comments, suggestions, or the like for the site.
You can even use it for tech support, sales inquiries, or even
service questions. I'll do what I can to help.</p>

<p class="sigP">- Michael<br>
<br></p>
<p class="dateP">Tuesday, April 17, 2007 - 05:48 PM</p>
<p class="newsP">We have brought the site online, finally. More
content to come!</p>

<p class="sigP">- Michael<br>
<br></p>
</div>
<div class="" style=
"position:relative; text-align:center; width:180px; height:25px; background-color:#000; margin:15px auto; border:1px solid #454545;">
<p style="font-color:white; text-align:center;">© 2007 <a class=
"hiddenLink" href="admin.php">Fusion Computers</a></p>
</div>

</div>
</body>
</html>

This looks good in IE and Fx. It uses your external CSS, and my added inlines styles. DON'T change your external CSS!! :eek: -that'll break my design.

-I could go through this and reduce the bloat by 50%, -easily. I just got it working here, -nothing pretty. :)

ps., -this sizes down now to about 400 width.... and looks okay!

[FusionComputers]

I like my resolution (1152x864).

Which IE were you using?

http://www.fusioncomputer.net/screen.jpg

That's 6. Vista sucks, so I doubt many people have upgraded yet from XP.

[FusionComputers]

Problems are fixed, site's back online.

[ray326]

Consider a more semantic mark up, too. E.g. your blog entries are a heading, one or more paragraphs of log and a sig. One way to mark them up would be a heading and paragraphs (using nothing but styles for the presentation). The styling would take into account a wrapping div ID.

<h3>Sunday, May 20, 2007 - 10:50 PM</h3>
<p>The backend I've implemented for this Web site is
largely finished. I have a working administration script that
integrates seamlessly with the site design. The way this has turned
out allows me to see exactly what my changes look like with a
simple refresh. The only instance where I need to upload any files
now is if I change my scripts.</p>
<p class="sigP">- Michael</p>

Another would be a definition list to show the relationships. The DL would span the whole log and each entry would be a DT for the date and two or more DDs for the entry and sig.

<dl>
<dt>Sunday, May 20, 2007 - 10:50 PM</dt>
<dd>The backend I've implemented for this Web site is
largely finished. I have a working administration script that
integrates seamlessly with the site design. The way this has turned
out allows me to see exactly what my changes look like with a
simple refresh. The only instance where I need to upload any files
now is if I change my scripts.</dd>
<dd class="sigP">- Michael</dd>
</dl>

[WebJoel]

Ok, give me a hex math lesson here. How can #ffffff accurately become #fff and still work properly?

And the arguments for the margin statement go margin-top, margin-bottom, margin-right, and margin-left?
Think "shorthand": #ffffff = #fff; #000000 = #000; etc.

Think "red-red, green-green, blue-blue" = "red,green,blue". It's just an abbreviated method of writing this. Applied consistantly, this and a hundred other 'shorthand tweaks' can greatly reduce superfluous coding for faster downloads and reduced bandwidth consumption.

And not quite: it is "top - right - bottom - left" if four values are given. Two values given means top-bottom and right-left. -Kinda complicated for my pgramatic mind, so I either state two values, or four values.

[WebJoel]

I like my resolution (1152x864).

Which IE were you using?

http://www.fusioncomputer.net/screen.jpg

That's 6. Vista sucks, so I doubt many people have upgraded yet from XP.

IE6, and Fx 2.0.0.4. And Mozilla, Opera, and Seamonkey & Konqueror over on Linux. I don't/won't use IE7 just yet... I tried it and wasn't liking what I was seeing, -and gave up and uninstalled it.

Yes, -your screenshot is what I see.

Yes, -Vista bites. Red my sig for some scary stuff regarding how Vista operates... :eek: