A Blog about Linux, Open Source and Code! 
Symsys Inform Blog Home

Symsys Ltd Text logo in the banner area


Author:  Gremlette
November 21, 2008



 

 

I think there is nothing worse than owning a few domains and having nothing on them and so, we are starting to go through both new and old domains. First up is www.websiteNZ.co.nz.

It is a fantastically easy to remember name and certainly no tongue twister to tell anybody over the phone or remember from a passing advertisement. It will be very aparrent that a lot of our time has been invested in the Symsysit.com website but once we end up with a design that works and functions exactly how we would like, it then leaves less room for play.

Pure CSS, No Script, Tableless Horizontal Website

The new Website, www.websiteNZ.co.nz has been a refreshing technical challenge over that last few weeks. The goal set was a crazy idea to make a site that is horizontal, no plugins, no script, NO TABLES allowed using valid XHTML Strict and CSS 2.1 maximum. Also, to look right on my 22″ widescreen running 1680×1050 and equally look right on a 17″ square 1024×768 screen be it IE6 or Google Chrome.

Argh I hear you say….. and yes BIG ARGH it was.

Some of the problems to overcome when creating a Navigable horizontal Website.
When placing navigation to skip back and forth through a single horizontal page using anchors, it becomes a virtually impossible nightmare.

One of the main issues is Internet Explorer.
ALL other browsers known to man will skip to an anchor aligned to the right of the page, to show the page it belongs to.

Mictosoft IE based Browsers do not know their left from Right

So, basically any web designer trying to do a site like this for IE only would have to revert to a mentality of that lower than Kindergarten student. It would be like being a passenger in a car driven by an American in NZ or the UK tackling their first roundabout…. understandably very confusing and very messy unless you are in the know.

See the diagram below for the result. The page will never quite get to the screen in an IE based browser unless you

A) give the anchor it’s own dedicated cell to bounce left to right in. and

B) write double the code to alternate left and right for Everyone else with common sense versus IE based browsers.

Thanks a bunch Mictosoft! But then I suppose it is fitting to have so much unnecessary bloated code to satisfy the conditions. The rest of the bloat is to cover up their opposite understanding of margins and paddings and magically invented extra pixels solely by guess what – …. IE Based browsers.

Microsoft Kindergarten Level knowledge of Direction

Microsoft Kindergarten Level knowledge of Direction

The best web design practice, is to design and test for Chrome and Firefox, then add adjustments for IE7+ then again add adjustments for IE6 and other inferior browsers. This way, you know your CSS is correct even when IE decides to do the exact opposite of what it should be doing.


Filed under: CSS,XHTML ... Comments (1)


  

 





Author:  Gremlette
October 25, 2008



 

 

How to hide entire blocks of code from GOOD BEHAVING browsers.

Now that most web coders / designers are putting advanced effort into writing decent compliant code for their sites, there are a variety of ‘fixes’ that have to be employed to cure problems in old bad behaving browsers such as IE6 and below. 

MANY ‘get arounds’ involve miles of Javascript code which is completely useless as well as resource-hogging when many users block javascript completely for security purposes. The reasons that people hold onto old and ancient technology such as IE6 is due to a completely misled belief that it is more stable than the upgrade and more secure. The MAIN problem is IE6 and where I agree that IE7 is not ‘all that’, it is now usable and closer to compliance and good security than IE6 is!
At the end of the day – IE6 insistent users are STUBBORN, so although it pains any decent coder to work with and doubles the billing time on a clients web development sometimes, we have to try to work with it.

SAVE HOURS OF CSS HELL. If your visitor insists on ancient technology and blocking Javascript, then they have to EXPECT not being privvy to some modern compliant effects and functions. Example: users of programs such as ‘NoSCRIPT’ have no idea what ‘Digg’ and ‘Delicious’ are because they never see it and cannot even add RSS feeds to thier Facebook account…. similarly, whateverhover and other Javascript menu hacks designed purely for IE6 and old browsers become completely pointless.

So, you have a nice pure CSS styles functional section such as an active menu that

a) Requires ZERO Javascript Whatsoever
b) Is SUPER fast
c) Super clean and clear
d) Loved by Web crawler robots etc

BUT it won’t behave for stubborn stick in the mud’s like IE6, the likes, and below users.
The benefits of non dependant and compliant code is far too good to not use.
YET you have code that old browsers CAN work with that does the same functions yet still not javascript etc dependant (though may not be as nice)…. yet you don’t want BOTH to show up on the same page.

 Keep two versions and STAY Javascript Free

1)  Hide the GOOD STUFF from old browsers

Your two lumps of code ‘GOODstuff’ and ‘ALTstuff’ will be defined in <div> tags.
eg

<div id=”GOODstuff”> all the HTML in here</div>
<div id=”ALTstuff”>repeat of the HTML in here</div> 

In your relevant style sheet hide GOODstuff from old browsers

#GOODstuff {display:none}
html>body #GOODstuff {display:block}

Anything within the GOODstuff div tags including relevant styling will be hidden from old browsers but shows in Good behaving browsers.

2. Hide ALT STUFF from good browsers

#ALTstuff {display:block}
html>body #ALTstuff {display:none;} 

Basically, Good browsers will follow the html>body to NOT display the ALT code div contents.


Filed under: CSS,Code,XHTML ... Comments (0)

Tags: , , ,
  

 








 

 

This is a flexible HORIZONTAL HOVER menu that WORKS in IE 7 and Maxthon 2

… with NO Javascript Hacks. It is 100% W3C Compliant for XHTML STRICT and CSS.

More to the point – No Whatever:hover.htc Required NO SuckerFish or SuckerTree additions
NO [IF IE]…. Required
Naturally, if you WANT to support the ancient browser technology then use the Java addons mentioned – but I thought everone was crying out to refuse supporting it anymore (talking about IE6 and older that doesnt recognise hover, onclick ..) On that note, the CSS side menu on the main site works on IE6 and displays it’s formatting correctly … that is for another post though.

I am hoping that this code will be of valuable use to a fellow ‘Webby’ out there. Isn’t it great when you get the thing looking JUST how you want it… and then a few days later, you check it is supposedly ‘bugs ironed out version’ Internet Explorer 7 and the world drops on your head.

Microsoft live in ‘opposite world’ …. because in opposite world when you say display inline / and say make my menu horizontal … you mean’t Vertical —- NOT!!!

And so, after a LOT of trials, tribulations, and pain from banging my head on the desk, I got this working and hope to save someone elses pain in the process.

So what about IE6 you ask.

IE6 just doesnt show the thing at all ) which suits me, in fact that’s GREAT! -It doesnt show any errors to your visitor… but it would be a good idea to give a bog alternate nav or PREFERABLY encourage anyone on IE6 / IE ancient based to come out of the dark ages, into the 21st Century – and UPGRADE!- preferably NOT to IE anything including anything based on it such as Maxthon. It has YET to be successfully described why some think IE6 is safter to use that other browser.

Checked and working “Okilidokily” IN:

Firefox 2, Google Chrome, Avant, Opera 9, Netscape Navigator 9, Flock 1.2. Tested on Firefox on Linux. Safari 3 on PC. It WORKS in – IE 7 and Maxthon 2 !! :D

The Code

Right then…. The XHTML code is as bog as bog can be with a simple UL / LI (Unordered List / List) Menu listing. The basic model is as follows:

XHTML

<div id=”topnav”>

<ul class=”nav”>

<li><a href=”#”>TITLE A</a>
<ul>
<li><a href=”/pagelink.php”>Subtitle 1</a></li>
<li><a href=”/pagelink.php”>Subtitle 2</a></li>
<li><a href=”/pagelink.php”>Subtitle 3</a></li>
<li><a href=”/pagelink.php”>Subtitle 4</a></li>
</ul>
</li>

<li><a href=”#”>TITLE B</a>
<ul>
<li><a href=”/pagelink.php”>Subtitle 1</a></li>
<li><a href=”/pagelink.php”>Subtitle 2</a></li>
<li><a href=”/pagelink.php”>Subtitle 3</a></li>
<li><a href=”/pagelink.php”>Subtitle 4</a></li>
</ul>
</li>
</ul>

Of course you can put links on the titles instead of ‘#’. The point is – it HAS to be a link – even if it is null (#)

Now for the CSS. First I have put in the absolute stripped down CSS ‘as is’ and the ACTUAL Symsys menu Style colours, sizes, paddings and margins. You will see that the result is quite unbloated, short and sweet.
After this, I will put the humongous annotated sheet so you know what does WHAT, and where to change to your custom style.

CSS – TRIMMED

#topnav {display:none;}
html>body #topnav {display:block;}
#topnav {position:absolute; margin-left:300px; margin-left:115px; top:159px; font-size:0; text-align:left;}
*—–Yes NEED margin in twice——*/
.nav li{display:inline;}
.nav li ul{padding-top:2px;}
ul.nav { margin-top:5px;}
ul.nav, .nav ul{margin:0; padding:0; cursor:default; list-style-type:none;}
ul.nav>li{display:table-cell; padding:1px; width:120px; float:left;}
ul.nav li>ul{display:none;}
ul.nav li:hover>ul{display:block;}
.nav ul li a{display:block; padding: 2px 4px 2px 4px;}
.nav li a {color:#fff; padding-left:4px;}
.nav ul li a{background-color:#EAEAEA; color:#000; width:112px; margin-top:1px;}
ul.nav li:hover {background-color:#28a3c5;}
.nav ul li a:hover{background-color:#fc0; color:#000;}
ul.nav li:active,
.nav ul li a:active{background-color:#44C21F; color:#FFF;}
.nav a{font:bold 12px Arial, Helvetica, sans-serif; text-decoration:none;}

Yes, that was IT. And now for the maybe excessively annotated version. I will apologise if some things are not too clear to you personally but hopefully you will find it easy to follow.

CSS – EXPLAINED

#topnav {display:none;}
html>body #topnav
{display:block;}
/*—– These 2 lines Hide from IE6 and older ALTOGETHER——*/

#topnav {
position:absolute;/*—–place exactly where I WANT it to appear——*/
margin-left:300px;
*—–usual IE Fix of following position:absolute with Position: relative will not work
Re-adjust the margin to correct IE Invented placement. Big headed MS will read the FIRST instance of a repeat element as THEIRS and ignore any repeat element afterwards…(sounds typically fitting for that company lol). All the other browsers that follow code convention properly will see the first, then see the second and update/use that instead
——*/

margin-left: 115px;
top: 159px;
/*width:9999px;—makes no difference —-*/
font-size: 0; /*—–fix menu placement – all browsers unified——*/
text-align:left; /*—–If you want menu Items Centered then change it——*/
}

.nav li{
display:inline;
/*no difference in all other browsers but REQUIRED for IE (7)*/
}

.nav li ul{
padding-top: 2px;
/*padding at top (UNDER heading) of the entire submenus ONLY–*/
/* padding-bottom:5px; OPTINAL padding at bottom of the entire submenus ONLY – or use MARGIN – Does Not matter – get the SAME result in all browsers–*/
}

ul.nav { margin-top: 5px;}
/*display:table;—makes no difference inline, table, whatever—-*/
/*position:relative;—makes no difference —-*/

ul.nav,
.nav ul
{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none; /*—gets rid of horrid bullet points and associated indents—-*/
} /*display: inline;no difference in ANY browser–*/

ul.nav>li{
display: table-cell;
/*—needs to be ‘TABLE-CELL’ or screws up ALL Menus – This ALSO hide the entire menu from ancient browsers (nice one) —-*/
/*display: inline;–screws up ALL Menus all do an IE and put subsequents AND Subs underneath–*/
/*position:relative;—makes no difference —-*/
padding: 1px ; /* This effectively puts 1px border extended around submenupopup – optional – make anything you want – will effect overall width of menu so may have to reduce widths unanimously to compensate—-*/
width:120px; /*Specified width of menu Tabs–*/
float:left; /*IE (7) ONLY diff – doesnt plonk subsequent and subs underneath on hover -*/
}

ul.nav li>ul{
display: none;
/*obviously – don’t show submenu normally—-*/
/*position:relative;—makes no difference —-*/
}

ul.nav li:hover>ul{
display : block;/*obviously – show submenu only when the mouse is over it—*/
/*position:relative; Makes stuff all difference –*/

}

.nav ul li a{
display: block;
padding: 2px 4px 2px 4px;
/*padding around submenu links order- top right bottom left (clockwise) */
/*border-top: 1px solid #000; optional entries – of course, my example has border extended aound it already making a bottom line*/
}

.nav li a { color:#000;/*** Menu Title color only!!!!! ***/
padding-left:4px;}/*** Left and right padding effective ONLY for menu titles here – probably best to match padding of submenu items as above***/
/* padding-top:9999px;}** this may appear to be a silly entry BUT in all browsers apart from IE (7) it creates an invisible hotspot extending in this case 9999px above the menu title TEXT width. Cool trick – handy if you want it – nuke it if you dont. Take it out of comment to try***/

.nav ul li a{
background-color: #EAEAEA;
/*** bg col of entire submenu***/
color: #000;/*** text col of entire submenu***/
width: 112px;/*fixes sub width Firefox*/ /* width minus padding (both sides) of sub items to compensate eg if 4 – same width as header cell 120 – (2×4 left right padding)= 112—-*/
margin-top: 1px;} /*put this in IF you WANT a gop between each submenu item – the background of extended top item background will show behind***/

ul.nav li:hover {
background-color: #28a3c5;}
/*** Only open menu header and matching extended border around who menu/submenu if opted for) ***/

.nav ul li a:hover{
background-color: #fc0;
color: #000;
/*** text col and bg col of submenu individual li items on hover – mine are kept black – you can choose different***/
}

ul.nav li:active,
.nav ul li a:active{
background-color: #44C21F;/*** text col and bg col of submenu individual li items on Click / active***/
color: #FFF;
}/*** Browser differences – on click the title item will also change bg col including any visable background between menu item blocks. (not title txt col aswell) This is in Chrome Firefox Opera Netscape Flock- but not in IE – See notes for versions tested**Of course, you can always just remove ul.nav li:active,*/

.nav a{
font:bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
}

Further Comments

IE7 and Maxthon 2 – on load, it millisend hops to the right then puts it where it should – not really an issue just typically lame coding by Microsoft (Hey, I use XP Pro, have done for years and although it does get bogged down I am happy enough with it – I outright refuse to entertain vista or the upcoming Windows 7 though)

Minimal layout glitch on Opera 9 – all good – though does put a visable padding above the title items by about 2px – shoving it all down a tad ( and no, it is nothing to do with the 2px padding under the title header being applied. Let me know if you fix this “pwetty pweeeease”.

Learning CSS and VALID code…. The rule of thumb is, if youre not having any trouble in IE, then theres something wrong with your code – youre not doing it right–


Filed under: CSS,Code,XHTML ... Comments (2)

Tags: , , , , ,
  

 





Enter your email address:

Delivered by FeedBurner