Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Shrinking CSS menu when using gallery

Featured Replies

My CSS menu is working fine on all my pages (checked, double checked and checked again) except for the one where I have embedded Simpleviewer into it.

The CSS menu seem to shrink in width and depth by around 5 pixels. I have tried almost everything. Can anyone help?

Is it to do with something built into the gallery?

Thanks in advance!

got a link? could help.

 

Also is it all browsers, specific browsers etc?

  • Author

At the moment I have only tried it in Internet Explorer 7. All my other pages seem fine except for the one with the Flash gallery. I've included the code and CSS for troubleshoot - many thanks.

 

 

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>SimpleViewer</title>

<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->

<script type="text/javascript" src="swfobject.js"></script>

<style type="text/css">

body {

background-color: #ffffff;

font: .8em/1.3em verdana,arial,helvetica,sans-serif;

}

 

#flashcontent {

width: 100%;

}

</style>

<link href="cork css style sheet.css" rel="stylesheet" type="text/css">

</head>

 

 

<div id="conteneur">

<div id="header"></div>

 

 

<div id="nav-menu">

<ul>

<li><a href="index.htm" >home</a>

<li><a href="aboutus.htm" >about us</a>

<li><a href="simplegallery.htm" >gallery</a>

<li><a href="gallery.htm" >client</a>

<li><a href="contact.htm" >contact</a></li>

</ul>

</div>

 

<body>

 

<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>

<script type="text/javascript">

 

var fo = new SWFObject("viewer.swf", "viewer", "800", "575", "8", "#181818");

 

 

 

// SIMPLEVIEWER CONFIGURATION OPTIONS

// To use an option, uncomment it by removing the "//" at the start of the line

// For a description of config options, go to:

// http://www.airtightinteractive.com/simpleviewer/options.html

 

//fo.addVariable("xmlDataPath", "gallery.xml");

//fo.addVariable("firstImageIndex", "5");

//fo.addVariable("langOpenImage", "Open Image in New Window");

//fo.addVariable("langAbout", "About");

//fo.addVariable("preloaderColor", "0xFFFFFF");

 

fo.write("flashcontent");

</script>

 

 

</div>

 

</body>

</html>

 

 

 

HERE' THE CSS:

 

body {

margin: 0;

padding: 0;

background-color: #505050;

background-image: url(graphics/gradient.gif);

background-repeat: repeat-x;

}

 

#conteneur {

position: absolute;

width: 800px;

left: 50%;

margin-top: 20px;

background-color: #33FF00;

margin-left: -425px;

}

 

#header {

height: 100px;

background-image: url(graphics/cork-header.jpg);

}

 

p {

color: #FFFFFF;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 17px;

padding-right: 40px;

padding-left: 40px;

padding-top: 0px;

}

 

#nav-menu ul {

margin: 0em;

list-style-type: none;

padding: 0px;

}

 

#nav-menu li {

float: left;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}

 

#nav-menu {

width: 800px;

}

 

#nav-menu li a {

text-decoration: none;

background-color: #000000;

text-align: center;

display: block;

float: left;

height: 22px;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 11px;

width: 100px;

border: 1px solid #FFFFFF;

color: #FFFFFF;

vertical-align: 0%;

margin: 0px;

padding-top: 4px;

}

 

#nav-menu li a:hover {

text-decoration: none;

background-color: #505050;

text-align: center;

display: block;

float: left;

height: 22px;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 11px;

width: 100px;

border: 1px solid #FFFFFF;

color: #FFFFFF;

vertical-align: 0%;

margin: 0px;

padding-top: 4px;

}

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.