PDA

View Full Version : IE link problem



techjosh
04-14-2009, 11:44 PM
I'm tired of burning hours trying to get things to work in Internet Explorer when no other browser has anywhere near the same amount of problems, so I'm asking for help on this one. On my web page, the link to FileZilla is not clickable when viewing under IE. It's still blue and underlined, but not clickable. It works fine in any other browser. Plz help... Link below

http://techjoshonline.com/web_dev.html

wysiwyg
04-15-2009, 01:57 AM
div#list{
color: black;
margin: -20px 10px 5px 115px;
}

The negative top margin is causing the element to be overlapped by.. the container element of the previous item?

techjosh
04-19-2009, 12:13 PM
It looks like that was the problem. I don't have the time to go through and completely change the code of this old page just so It'll work easier in POS IE, so I just reworded it to make it two lines, with the link on the second. Thx for your help wysiwyg. It got so frustrating trying to figure it out with no luck.

SOLUTION: for others reading this, I have found out the "real" way to do columns, without using tables or anything (which the world seems to hate even tho tables are infinitely times easier to use then divs). Here's a sample skeleton:



<div id="wrapper"> <!-- your entire body -->

<div id="header"> </div> <!-- header stuff -->

<div id="navs"> </div> <! -- links -->

<div id="contentbox"> <!-- a div surounds all the columnar divs in the main content area -->
<div id="contentleftnavigation"> </div> <!-- left navigation in main content area -->
<div id="contentmain"> </div> <!-- main content area -->
</div> <!-- end contentbox -->

<div id="footer"> </div> <!-- footer stuff -->
</div> <!-- end wrapper (entire body of stuff) -->

Now the CSS


div#contentbox{overflow: auto} /* may experiment with auto and none */

div#contentleftnavigation{float: left}

div#contentmain{float: right}

div#footer{clear: both} /* you need a clear both after any floats, explained below */


Now some explanation:

overflow: auto -- this makes your contentbox stretch to include the contents of floating divs, because when you make divs float they no longer exist inside any element (so it would cause the contentbox to have 0 height and the floating divs to exist outside of it)
clear: both -- since floating divs sortof don't exist inside anything, your footer would appear just below the links, as if the columnar floating content stuff had 0 height. using "clear: both" put's your footer below any floating elements above it
GIVE THE COLUMNS A WIDTH: Example: for the left column do {width: 18%} and for right column do {width: 80%}. You'll often have to have a tiny area, like 2%, in between.

**WARNING** You should include a margin and padding element to EVERY div. This is to help ensure your page looks the same in all browsers. (normally I just add a {margin: 0; padding: 0} to everything then change a few inside elements later.)

Afterword: Why it's so wierd and barely workable using columns with divs is beyond me, since it is, after all, the "correct" way to do page layouts.

wysiwyg
04-21-2009, 10:42 AM
There's nothing wrong with using tables for tabular data.

The problem is using nested tables to create the layout of the page, which is what people were doing for a while, and what most wysiwyg programs do. This was adding a ton of extra, unreadable code to the page.

If I want something in columns and rows, it's going to be a table.

felgall
04-21-2009, 01:18 PM
If I want something in columns and rows, it's going to be a table.

Of course if that is for layout rather than for tabular data then it should be a CSS table not an HTML table.