4 replies [Last post]
im_milkfan
Offline
newbie
Last seen: 14 years 20 weeks ago
Joined: 2009-01-03
Posts: 3
Points: 0

Hey guys! I have problem in doing my project. The layout in IE turned haywire.
The layout that I saw in the Design view of the Dreamweaver CS3 was totally different from the view I saw in IE. Was it because I used too much of absolute position or..? Pls help me to solve this problem if not I cant do the template. Sad

To add on,there is white space in the submenu of the spry horizontal menu bar. I searched for the exact one from the style sheet but I couldnt find. Can someone tell me? Thanks!

Below is the incompleted CSS coding.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Singapore Sports Council - Home</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="wrapper">
  <div id="banner"><img src="image/SSC banner.jpg" alt="Singapore Sports Council banner" width="983" height="277" /></div>
  <div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Information</a>
          <ul>
            <li><a href="#">Overview</a></li>
            <li><a href="#">About SSC</a></li>
            <li><a href="#">Corporate Structure</a></li>
            <li><a href="#">Members of SSC</a></li>
            <li><a href="#">Financial Information</a></li>
            <li><a href="#">Milestones</a></li>
            <li><a href="#">Awards</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Participation</a>
        <ul>
          <li><a href="#">Target groups</a></li>
          <li><a href="#">Facilities</a></li>
          <li><a href="#">Sports Safety</a></li>
        </ul>
      </li>
      <li><a href="#">Activities/Events</a>          </li>
      <li><a href="#" class="MenuBarItemSubmenu">Excellence</a>
        <ul>
          <li><a href="#">Support</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">High Performance Training Centre</a></li>
          <li><a href="#">Sports Medicine &amp; Sports Science</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Courses </a>
        <ul>
          <li><a href="#">For women</a></li>
          <li><a href="#">For children &amp; youth</a></li>
          <li><a href="#">For working adults</a></li>
        </ul>
      </li>
      <li><a href="#">Career</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Highlights</a>
        <ul>
          <li><a href="#">Media Releases</a></li>
          <li><a href="#">Messages &amp; Speeches</a></li>
          <li><a href="#">Bulletins</a></li>
          <li><a href="#">News Article</a></li>
        </ul>
      </li>
      <li><a href="#">Contact </a></li>
    </ul>
  </div>
  <br/>
  <div id="leftColumn">
    <p>
      <embed src="http://www.clocklink.com/clocks/5012-gray.swf?TimeZone=PST&"  width="227" height="75" class="imgLeft" wmode="transparent" type="application/x-shockwave-flash">      <a href="http://www.teamsingapore.com.sg/publish/teamsingapore/en.html"><img src="image/team spore logo.jpg" alt="Team Singapore" width="150" height="75" hspace="20" vspace="20" align="left" /></a>
 <p>&nbsp;</p>
 <a href="http://www.sis.gov.sg/"><img src="image/SIS logo.jpg" alt="Singapore Indoor Stadium" width="150" height="152" hspace="20" vspace="20" align="left" />
 <p>&nbsp;</p>
 <img src="image/ecitizen logo.jpg" alt="eCitizen" width="150" height="40" hspace="20" vspace="20" /></a></p>
    <p>&nbsp;</p>
  </div>
  <div id="mainColumn">
    <div>Sports In Singapore</div>
 
  </div>
  <div id="footer">Information | Participation | Activities/Events | Excellence | Courses and Workshops</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

im_milkfan wrote:The layout

im_milkfan wrote:

The layout that I saw in the Design view of the Dreamweaver CS3 was totally different from the view I saw in IE. Was it because I used too much of absolute position or..?

Without doubt, yes. Don't use DW's design view as prior to CS4 it uses a shonky rendering engine and as you've found, when you view your site in a real browser it comes out all wrong.

im_milkfan wrote:

Below is the incompleted CSS coding.

Actually what you've posted doesn't contain any CSS and without it, no-one can help you.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

im_milkfan
Offline
newbie
Last seen: 14 years 20 weeks ago
Joined: 2009-01-03
Posts: 3
Points: 0

Hi Tyssen, So I shall

Hi Tyssen,

So I shall follow the view that I saw in IE,rather than in Design view of CS3? Its that what you meant?

Currently,I have 2 CSS files. One is for main and another is the spry menu horizontal bar.

Main.css

@charset "utf-8";
#wrapper #footer {
	color: #FFFFFF;
	background-color: #000000;
	font-size: 85%;
	text-align: center;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	z-index: 20;
	margin: 2px;
	padding: 2px;
	float: right;
	position: absolute;
	left: 9px;
	top: 1335px;
	width: 930px;
}
#wrapper #mainColumn {
	width: 490px;
	float: right;
	padding-top: 8px;
	padding-right: 25px;
	padding-bottom: 12px;
	padding-left: 20px;
	position: absolute;
	left: 413px;
	top: 334px;
}
#wrapper #leftColumn {
	float: left;
	width: 40px;
	border: thin solid #000000;
	position: absolute;
	height: 400px;
	left: 9px;
	top: 333px;
}
#wrapper #navigation {
	color: #FFFFFF;
	background-color: #FF0000;
	position: fixed;
}
a:link {
	color: #3300CC;
	text-decoration: underline;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #330066;
}
a:active {
	color: #000099;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 160%;
	color: #000000;
	text-align: center;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	color: #006633;
	text-align: left;
}
.imgLeft {
	margin: 5px;
	float: left;
}
#wrapper #footer #a:visited {
	color: #CC0099;
	text-decoration: underline;
}

SpryMenuBarHorizontal.css

@charset "UTF-8";
 
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
 
/* 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: 120%;
	cursor: default;
	width: auto;
	background-color: #FF0000;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: <a href="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html" rel="nofollow">http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html</a> */
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: 96.5%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: auto;
	float: left;
	background-color: #FF0000;
}
/* Submenus should appear below their parent (top: <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> 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: 80%;
	z-index: 1020;
	cursor: default;
	width: auto;
	position: absolute;
	left: -1000px;
	font-weight: normal;
}
 
 
/* 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
{
	display: block;
	float: none;
	width: auto;
	white-space: nowrap;
 
 
}
 
/* 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 li {
	width: auto;
}
 
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #FF0000;
	color: #333;
	text-decoration: none;
	padding-top: 0.5em;
	padding-right: 0.75em;
	padding-bottom: 0.5em;
	padding-left: 0.75em;
}
/* 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: #33C;
	color: #FFF;
	font-weight: normal;
}
/* 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: #33C;
	color: #FFF;
	font-weight: normal;
 
 
}
 
/*******************************************************************************
 
 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: 100% 50%;
	background-color: #FF0000;
	width: auto;
	font-weight: normal;
	padding: 0.5em 2em 0.5em 0.75em;
 
}
/* 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%;
	font-weight: normal;
	color: #E0DFE3;
	width: 4em;
}
/* 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: 100% 50%;
	background-color: #FF0000;
	font-weight: normal;
}
/* 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: 100% 50%;
	background-color: #FF0000;
	width: 3em;
	font-weight: normal;
}
 
/*******************************************************************************
 
 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;
}
/* 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;
	float: left;
 
	width: 4px;
	}
}

Now the problems are the images at the leftColumn are not aligned properly. And the submenu for the spry menu horizontal bar has white redundant space. I put display:block and white-space:nowraps under "ul.MenuBarHorizontal ul li" but still the same. Sad

I have been figuring it out these problems from yesterday onwards. >.<

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

im_milkfan wrote:So I shall

im_milkfan wrote:

So I shall follow the view that I saw in IE,rather than in Design view of CS3?

Any browser is better than CS3's design view, but you're better off using Firefox, Safari, Chrome or Opera rather than IE for testing. IE is buggy but there are workarounds that can be implemented once you've got your layout right in one of the other more standards-compliant browsers.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

im_milkfan
Offline
newbie
Last seen: 14 years 20 weeks ago
Joined: 2009-01-03
Posts: 3
Points: 0

Ok. I will use the Firefox

Ok. I will use the Firefox now.
If there's any problem again,I come back to here! Smile

Thanks,Tyseen. ^^