I came here through a thread I found in Google. I was hoping someone could help me here, because I’m having headaches adapting my sprymenubar CSS to IE…
In Firefox, my website works like a charm. In IE I’m having quite some problems.
I figured out where the problem lies, but I don’t have a clue how to solve it to get it to work.
The link to the site is the following: http://maxxit.be/Aanbod/Webdesign/Mira%20Site/Mira/sweetfruits/index2.html
As you can see (with IE) the horzontal menubar has a white background with red text, the sidebar has no background image at all. If you watch the same site with Firefox, you might notice how it should be.
I started troubleshooting by deleting my spryassets step by step. That’s how I discovered, that strange enough, the sprymenubar.js caused for the backgrounds to change.
The sprymenubar.js, makes the tabbed panel to work, and without it you can’t see the subdivision in the menu, so that is essential. If I let the sprymenubar.js out of upload, the site looks fine (without subdivision tabbed panel though).
So I think the problem may lay in here, and could maybe be a great help for other people too, because I heard a lot of people having problem by making CSS compatible with all browers and especially IE.
I located? the problem, but I don’t quite know what to do next, to get it to work.
So I was thinking maybe you guys at Sitepoint could help me out.
If the problem is solved, do you guys have any tips to prevent this happening in the future? If there are ways in any case to prevent this.
Thanks a lot in advance!
Kind Regards
Maxx-iT
P.S. I put the code from the sprymenubar.js into a text-file:
Fix your errors and then remove the background colour from here as shown in bold:
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\\loat: left;
[B]/*background: #FFF;*/[/B]
}
}
In style.css you have included styles tags and conditional comments and thay are not allowed in a css files because they are html.
See parts in bold that need ot be removed.
[B]<style type="text/css">[/B]
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5 {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
color: #394542;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
h6 {
text-align:right
}
p {
font-family: Verdana, Geneva, sans-serif;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#900;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #DEDFDE;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
min-width: 440px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
width: 75%;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 235px;
background-color: #FFF;
}
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
*/
.sidebar1 {
padding-bottom: 0px;
float: left;
background-image: url(../Mira/sweetfruits/images/menugroot.jpg);
width: 270px;
}
.content {
padding: 10px 0;
overflow: auto;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-image: url(images/footer.jpg);
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .header .horizontalMenu {
float: right;
}
.container .header .empty {
height: 206px;
}
.container .header .image {
float: left;
width: 20%;
}
.container .maxxit {
text-align: center;
font-size: 10px;
background-color: #DEDFDE;
}
.container .footer p {
text-align: center;
color: #DEDFDE;
font-size: 12px;
}
[B]</style>[if lte IE 7]>
<style>[/B]
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
[B]</style>[/B]
The last css file should have been given to IE7 and under only by the look of it but you can do this with a simple hack instead and keep the last rules in the same stylesheet…
* html .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
*+html .content { margin-right: -1px; } /* " " */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
Spry is just the tip of the iceberg on ‘problems’ with the page – lemme guess… Dreamweaver? As our dearly departed friend Dan used to say, the only thing you can learn from Adobe is how not to build a website.
What makes that flash element a heading? Why a H6 when you have no H1, H2, H3, H4 or H5 preceeding it (aka broken heading orders)… why waste flash on a image rotator when you’d be better off with .js (at least on apple you’ll have .js avail) – much less that ‘instanceend’ nonsense from DW that usually makes more rendering errors than it’s editing assistance could EVER provide.
Though Spry, as mentioned by others – is trash. 100% pure grade A farm fresh manure. You can tell this from it’s ‘we need a class on every anchor’ nonsense… So the first order of business would be to clean up the HTML.
This retains the flash for now – but with it needing scripting to auto-play, I’d ditch the flash and just use scripting in the first place – especially since a fading image rotator with no controls is simple.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<script
type="text/javascript"
src="../../Scripts/swfobject_modified.js"
></script>
<title>
Mira - Binnenhuisinrichting
</title>
</head><body>
<div id="pageWrapper">
<h1>
Mira <small><span>Interieur</span>Inrichters</small>
<b><!-- image replacement --></b>
</h1>
<ul id="mainMenu">
<li><a href="index2.html">Home</a></li>
<li><a href="bedrijf.html">Bedrijf</a></li>
<li><a href="promo.html">Promo</a>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="sideBar">
<ul id="sideMenu">
<li><a href="schilderwerken.html">Schilder- en decoratiewerken</a></li>
<li><a href="behang.html">behang</a></li>
<li><a href="verf.html">verf</a></li>
<li class="hasKids">
<a href="raamdecoratie.html">Raamdecoratie</a>
<ul>
<li><a href="#">Overgordijnen</a></li>
<li><a href="#">Vouwgordijnen</a></li>
<li><a href="#">Paneelgordijnen</a></li>
<li><a href="#">Rolgordijnen</a></li>
<li><a href="#">Verticale Lamellen</a></li>
<li><a href="#">Plissé gordijnen</a></li>
<li><a href="#">Shutters</a></li>
<li><a href="#">Wood en Washi</a></li>
<li><a href="#">Velux-raamgarnering</a></li>
</ul>
</li>
<li class="hasKids">
<a href="vloerbekleding.html">Vloerbekleding</a>
<ul>
<li><a href="#">Karpetten</a></li>
<li><a href="#">Vasttapijt en tapijttegels</a></li>
<li><a href="#">Vinylvloerbekleding</a></li>
</ul>
</li>
<li><a href="zetelbekleding.html">Zetelbekleding</a></li>
<li><a href="meubilair.html">Meubilair en verlichting</a></li>
<li class="hasKids">
<a href="huislinnen.html">huislinnen</a>
<ul>
<li><a href="#">Tafellinnen</a></li>
<li><a href="#">Badmatten</a></li>
<li><a href="#">Sfeerdecoratie</a></li>
</ul>
</li>
</ul>
<!-- #sideBar --></div>
<div id="content">
<!--[if IE ]>
<object
id="homePageVideo"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="550" height="360"
>
<![endif]-->
<!--[if !IE]>-->
<object
id="homePageVideo"
type="application/x-shockwave-flash"
data="images/A welkom/welkom.swf"
width="550" height="360"
>
<!--<![endif]-->
<param name="movie" value="images/A welkom/welkom.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../Scripts/expressInstall.swf" />
<div>
Content on this page requires a newer version of Adobe Flash Player.<br />
<a href="http://www.adobe.com/go/getflashplayer">
<img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player"
width="112" height="33"
/>
</a>
</div>
</object>
<h2>
Dummy Content header
</h2>
<!-- #content --></div>
<div id="footer">
MIRA - DRIESSTRAAT 31-39 - 9240 ZELE (B) - T 052 44 44 70 -
<a href="mailto:info@mira-zele.be">info@mira-zele.be</a>
<div>
Design by <a href="mailto:info@maxx-it.be">Maxx-iT</a>
</div>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
<script type="text/javascript">
swfobject.registerObject("homePageVideo");
</script>
</body></html>
Throwing about 33% of the code in the trash (3.9k vs.6k) – I have time later I’ll belt out the CSS to go with that to show you the difference in approach and explain the how/why/where of said rewrite.
Oh, and I hope those colors aren’t final given they are totally illegible combinations of foreground and background. Red on Red? Ouch.
I’m very impressed by the responses I got, so I would like to thank you for this!
Very first information: I’m getting this problem on IE 7.0 and above, even on 9.0 latest version.
Paul O’B: I tried your tips and adapted all my stylesheets as you requested. Still, no avail. The endif is gone, the white background color remains, and background-image doesn’t appear at all, which I find odd, because I know we just deleted the white backgroundcolor.
Deathshadow: First of all, I used the H6 for the flash just to make it align centered and not to interfere with my other <h>-tags. It could have been easily <p class=“flashgallery”> aswell…
I wasted flash on such a simple gallery, just because I’m not familiar with the coding part of Javascript, and I wouldn’t even know how to begin. A flash gallery maker creates this for you through “cool-looking” and easy software.
I analysed for quite a bit the code you posted there, but I’m encountering some few problems getting over it. Off course I need to replace the screen.css link to my own style.css, and teh names of the divs need to be adjusted aswell corresponding to my css-file.
As I understand it, you suggest getting rid of the 2 sprymenus, and make them myself with <ul id=“mainMenu”> and <ul id=“sideMenu”>. The problem here is that I would need again js to get the submenu to appear, and that is knowledge I don’t possess (yet).
BTW: I love the way you inserted the flashgallery as an object, and now I don’t have that stupid: content requires newer version of Adobe, bla bla… So thanks for that! Still don’t know if that works on mac though, but I asked somebody to test, and I’ll post if this would work on mac.
Oh yes, about the colors: indeed red on red is damn wrong, it should be nearly white. I changed it to a darker color, because otherwise you couldn’t see the menu on IE with the white background. But thanks anyway
In Attachment, I put 2 .rars, the first: “Mira site” contains the sprymenubar.js, where, when executed, still lies some errors. That is if I open the site on IE, it appears as it should be, even with right colors and background the menu. Only thing is the flashgallery doesn’t work because the content was blocked. I give permission to allow blocked content (I’m guessing that is when he executes a .js file?) and then my flash works but my menu turns into the white one with no background.
The second one: “Mira 2” contains some general files, like my style.css, my index.html, the galleria-file(the .js for letting the flashgallery to work) and the sprytabbed.css from the tabbedpannels.
EDIT: Just found out that .rars are invalid here and also .css so I converted them to txt files…
I this would be any good in figuring out all of my errors, that would be great. I’m not asking for you guys to clean up the entire mess, but I you would like to explain where and why I was wrong, and how to fix it, or make it cleaner, that would be a great help!
I’m very eager on learning, so any advice would be welcome! I’m having the utmost of thanks for you guys and the help you give me!
BTW: What program would you recommend besides Dreamweaver to design my sites? And is it userfriendly and (relatively) quick to learn? For this Mira-site I’m having a deadline so that wouldn’t work, but on my next, due to november, maybe I would like to give it a try in something new? But then again, how’s the compatibility with Adobe Flash animations? Flash gallery makers? Considering I don’t know anything from .js…
You still have the background color here which is overi-riding trhe image.
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\\loat: left;
[B]background: #FFF;[/B]
}
}
and because the list are floated you need ot float the main menu also to make it contain its child floats.
ul.MenuBarVertical
{
float:left
}
That gets the menu up and running in IE9 as can be seen in this rough demo with most of the code in the head for testing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mira | Binnenhuisinrichting</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://maxxit.be/Aanbod/Webdesign/Mira%20Site/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarVertical2.css" rel="stylesheet" type="text/css" />
<link href="../../SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
<script src="http://maxxit.be/Aanbod/Webdesign/Mira%20Site/Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
margin: 0;
list-style-type: none;
cursor: default;
padding-top: 30px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 35px;
background-image: url(http://maxxit.be/Aanbod/Webdesign/Mira%20Site/Mira/sweetfruits/images/menugroot.jpg);
font-family: Verdana, Geneva, sans-serif;
width: 230px;
font-size: 15px;
float:left
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;
margin-right: 0px;
margin-bottom: 0;
padding: 0px;
margin-top: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #DDDDDF;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
list-style-type: none;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0px;
background-color: #394542;
color: #000;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 99%;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
.container .sidebar1 #MenuBar3 li ul .submenu {
font-size: 14px;
text-transform: capitalize;
width: 100%;
margin: 0px;
padding: 0px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: auto;
}
.container .sidebar1 #MenuBar3 li ul .submenu a:hover {
background-color: #DEDFDE;
color: #B50839;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: POINTER;
padding: 0.5em 0.75em;
text-decoration: none;
text-transform: uppercase;
}
.container .sidebar1 #MenuBar3 li ul .submenu a {
text-transform: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #B50839;
color: #FFF;
font-weight: bold;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #B50839;
color: #FFF;
font-weight: bold;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 99% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\\loat: left;
/* background: #FFF;*/
}
}
</style>
<style>
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12PX;
cursor: default;
width: AUTO;
font-family: Verdana, Geneva, sans-serif;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12PX;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #521A1B;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #394542;
color: #DEDFDE;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #394542;
color: #DEDFDE;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\\loat: left;
}
}
</style>
<style>
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2{
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
color: #394542;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
h3 {
text-decoration: underline;
text-align: left;
color: #4E1B1A;
}
.home {
text-align: center;
font-size: 18px;
font-weight: bold;
color: #4E1B1A;
}
h6 {
text-align:right;
}
p {
font-family: Verdana, Geneva, sans-serif;
color: #762C2D;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#900;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #DEDFDE;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
min-width: 440px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
width: 75%;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 235px;
background-color: #FFF;
}
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
*/
.sidebar1 {
padding-bottom: 0px;
float: left;
background-image: url(http://maxxit.be/Aanbod/Webdesign/Mira%20Site/Mira/sweetfruits/images/menugroot.jpg);
width: 270px;
}
.content {
padding: 10px 0;
overflow: auto;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-image: url(images/footer.jpg);
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .header .horizontalMenu {
float: right;
}
.container .header .empty {
height: 206px;
}
.container .header .image {
float: left;
width: 20%;
}
.container .maxxit {
text-align: center;
font-size: 10px;
background-color: #DEDFDE;
}
.container .footer p {
text-align: center;
color: #DEDFDE;
font-size: 12px;
}
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
* html .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
*+html .content { margin-right: -1px; } /* " " */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="image"><img src="http://maxxit.be/Aanbod/Webdesign/Mira%20Site/Mira/sweetfruits/images/logo mira wit.jpg" width="300" height="235" /></div>
<div class="horizontalMenu">
<div class="empty"></div>
<div class="menu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="index2.html">Home</a> </li>
<li><a href="bedrijfsinfo.html">Bedrijf</a></li>
<li><a href="promo.html">Promo</a>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- end .header -->
<div class="sidebar1">
<ul id="MenuBar3" class="MenuBarVertical">
<li><a href="schilderwerken.html">Schilder- en decoratiewerken</a></li>
<li><a href="behang.html">behang</a></li>
<li><a href="verf.html"> verf</a> </li>
<li><a class="MenuBarItemSubmenu" href="raamdecoratie.html">Raamdecoratie</a>
<ul>
<li class="submenu"><a href="#">Overgordijnen</a></li>
<li class="submenu"><a href="#">Vouwgordijnen</a></li>
<li class="submenu"><a href="#">Paneelgordijnen</a></li>
<li class="submenu"><a href="#">Rolgordijnen</a></li>
<li class="submenu"><a href="#">Verticale Lamellen</a></li>
<li class="submenu"><a href="#">Plissé gordijnen</a></li>
<li class="submenu"><a href="#">Shutters</a></li>
<li class="submenu"><a href="#">Wood en Washi</a></li>
<li class="submenu"><a href="#">Velux-raamgarnering</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="vloerbekleding.html">Vloerbekleding</a>
<ul>
<li class="submenu"><a href="#">Karpetten</a> </li>
<li class="submenu"><a href="#">Vasttapijt en tapijttegels</a></li>
<li class="submenu"><a href="#">Vinylvloerbekleding</a></li>
</ul>
</li>
<li><a href="zetelbekleding.html">Zetelbekleding</a></li>
<li><a href="meubilair.html">Meubilair en verlichting</a></li>
<li><a class="MenuBarItemSubmenu" href="huislinnen.html">huislinnen</a>
<ul>
<li class="submenu"><a href="#">Tafellinnen</a></li>
<li class="submenu"><a href="#">Badmatten</a></li>
<li class="submenu"><a href="#">Sfeerdecoratie</a></li>
</ul>
</li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<p class="home"> Welkom bij MIRA-Zele, interieurinrichters </p>
<p class="home">Uw specialisten voor behang, verf, raamdecoratie, huislinnen en vloerbekleding </p>
<p class="home">Uitvoering van alle schilder-en decoratiewerken </p>
<p class="home">Interieuradvies - totaalinrichting voor privé en bedrijf </p>
<h6>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="360">
<param name="movie" value="images/A welkom/welkom.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/A welkom/welkom.swf" width="550" height="360">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="../../Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h6>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<div class="footer">
<p>MIRA - DRIESSTRAAT 31-39 - 9240 ZELE (B) - T 052 44 44 70 - <a href="mailto:info@mira-zele.be">info@mira-zele.be</a></p>
<!-- end .footer --></div>
<div class="maxxit">Design by <a href="mailto:info@maxx-it.be">Maxx-iT</a></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Those spry menus are more trouble that they are worth and the simpler suckerfish menus are more reliable.
Wooohoo, works now on IE! If you guys have any more tips to clean up my code, lemme know. Always nice to enhance productivity :p.
Next time I’ll try suckerfish menus in stead of spry!!
Thanks a lot!
Still in serious problems with the flash gallery on mac. Lot of the people that visit the site are users of IPads, Macs, and other Apple shizzles… And with a flash gallery and links from the photos on it, that’s quite the problem if it doesn’t work on Apple…?
It’s only on mobile devices that it won’t work–iPhone, iPad etc. But that Flash gallery is slow to load, and it’s easy to do that with JavaScript these days.
You could do this more easily with JS, and have it set up in 5 minutes, and it would load much faster. Check out jQuery Cycle*. It’s very nice. Dump Flash forever.
Experimented a bit with the Jquery for the flashgallery AND it works.; But I was wondering if it was possible, to add thumbnails on the bottom, to add arrows, so you can click to see next/previous and if you can add links by clicking on a photo?
There are plenty of jQuery galleries out there that do that, but not this one. (I’m not quite sure what you mean by the add links by clicking on a photo).
Well yeah just wondering if it would be possible that when you click in the middle of a photo of the slideshow, a page opens or the div next to it, displays the information belonging to the photo…
It’s not a necessary thing though at my site, but if that option was available, it would be nice.
Going to study the demos that Victorinox posted!
I had forgotten the Cycle had a thumbnail option. It might be worth checking out something like Slimbox, too, as ‘lightbox’ solutions like that include notes about the picture.
Ok So I started a bit experimenting with JS (as a newbie :-p) And got the slideshow to work. Now I’ve found a tutorial, to add a custommade prev and next button to your slidehow, so you can click it!
That’s where I get into trouble… I made a script to get the buttons to work. I made 2 buttons, which I places as background to an ul #nav inside my slideshowdiv. The pictures are in another ul inside slideshowdiv.
These are the problems:
I don’t see my buttons in the left and righthandside of the slideshow :(. So how can I position them into my slideshow?
Obv I can’t click on them either :-). Is there something wrong with the code?
In the tutorial they told me to put the slideshow div on overflow:scroll if js wouldn’t work. In the scripts.js, you put the div back on hidden if js does work. He doesn’t do this with me… + IF I put slideshowdiv on overflow:scroll, he adds some kind of margin to the left and on top of my left td of my table, so the photos arent fully seen in the td as normal, and need to be scrolled…
I downloaded the jquery.cycle.all.js, jquery.js and added my own scripts.js…
in attachment you can find my scripts.txt, my css of the left TD of my table inside the content, where the slideshow needs to come. The right is filled with text and information.
I also added the sourcecode of the left td…
It works well!!!
Everything is now solved, and I think I can put him online… There is a very minor issue with the slideshow: Whenever you hover the slideshow, you can see that he takes the photo like 10px down. As if on hover the margin-top is all of a sudden 10px or something, can’t find the error nor line for that in the css, so I don’t know where it’s coming from! If you have any idea?
And that would be the last of me disturbing you :-)!!!
Oh no, just had a look on Mac at the site, and it looks great.
HOWEVER it’s a small macbook, I think 15", but the site now puts the content div UNDER the sidebar, because of the width… How can I adapt this, without having to change my entire css and measurements?
