25 replies [Last post]
jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

http://www.br0wnsnake.com/a.html (a.css)
This is the page where content for div#ab has mysteriously disappeared but appears fine in mac IE5 and NS7 . Windows firefox at least shows the content but not aligned as I prefer it in the two mac browsers mentioned.
I have no idea what I've done wrong.
Is it display inline?

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

Hi there,

First things first: always, ALWAYS ensure that you're working with valid HTML before trying to address any problems - HTML or CSS! Smile

The answer to your problem is the combination of two position values: relative and absolute

If you set a declaration position:relative within your #wrapper rule, then, edit/add the following to your CSS:

div#ab ul {
  font-size:14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight:bold;
  padding: 0;
  margin: 0;
}

div#ab li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 183px;
}

div#ab li#about {
  left: 305px;
}

div#ab li#services {
  left: 430px;
}

div#ab li#enquiry {
  left: 575px;
}

Note that you'll also need to set id's for each menu option within your HTML, so:

...
<li id="about"><a href="natabout.html">about</a></li>
<li id="services"><a href="natservices.html">services</a></li>
<li id="enquiry"><a href="natenquiry.html">enquiry</a></li>
...

When you use position:absolute you are positioning an item relative to it's container (usually the body of the page). If you declare position:relative on another, 'inner' container (in this case, your #wrapper container) then absolutely-positioned items inside the container are positioned relative to the dimensions of the container itself.

Anyway, you should now find the page rendering is pretty similar across the main browsers (and HOPEFULLY Mac IE5 too!)

Now for the problem with absolutely positioning of text on background images: watch what happens when you resize the text on a browser such as Firefox - see how the bulleted text above them drops underneath (as opposed to 'below') the menu?

You can fix this issue by floating the containers and absolutely positioning the list items relative to the #ab container (and by making the 3 grey 'double-disc', menu-item-background' images sit on the background of the same container!)

Hope that helps!

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

OMG thank you so much for taking the time to explain all that.
I've been away from the pc until just now so need time to take in the info you've provided- just want you to know I really appreciate the help.
I hope you are still about once I've tried to work through the help.
Thanks alot!

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

Ok , I must be getting this wrong because the menu items are still coming up in the wrong place.
Was I supposed to put a position:relative on the wrapper div? It didn't seem to make any difference so I left it out.
Now I'm unable to position the inline linked text..
Here is the page with added css:
http://www.br0wnsnake.com/c.html

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

Sorry, sorry, my fault :oops:

I think I forgot to mention that you needed to swap the #contact and #ab containers around too. It will be easier if I just give you my versions of the HTML and CSS:

<!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>natural matters design</title>

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

<link rel="stylesheet" type="text/css" href="a.css" title="default"></head>

<body>
<div id="wrapper">
  <div id="intro">
    <h1> WELCOME to natural matters design</h1>
    <br />
    -SOLAR PASSIVE DESIGN <br />
    -EFFICIENT <br />
    -ENVIRONMENTALLY SOUND <br />
    -ECONOMIC SENSE <br />
    <br />
    <h2>COMPLETE DRAFTING SERVICE</h2>
  </div>

  <div id="innovate">
    <p>An innovative architectural design company<br />
    based in Armidale NSW, Australia.</p>
  </div>


  <div id="ab">
    <ul>
      <li id="about"><a href="natabout.html">about</a></li>
      <li id="services"><a href="natservices.html">services</a></li>
      <li id="enquiry"><a href="natenquiry.html">enquiry</a></li>
    </ul>
  </div>

  <div id="contact"> CONTACT:
   <br />
    Joakim Ho <br />
    Skyview <br />
    Milne Road <br />
    Armidale NSW 2350 <br />
    Australia <br />
    Phone +61 (2) 6775 3945 <br />
    Mobile +61 (4) 1926 1592
  </div>

</div>

<div id="nmd">&copy; 2005 natural matters design</div>

<div id="valid">
  <a href="http://validator.w3.org/">xhtml</a>&nbsp;&nbsp; <a href="http://jigsaw.w3.org/css-validator/">css</a>
</div>

<div id="version"><a href="natindex.html">flash version</a></div>

</body></html>

body {
background-color: #fff;
color: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper {
width: 700px;
height: 500px;
background-color: #fff;
margin:10px auto;
border: 2px solid #999;
text-align: left;
background-image: url(nmdbg4.jpg);
background-repeat:no-repeat;
}

div#intro {
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin-top: 10px;
font-size: 12px;
font-weight: bold;
padding: 0;
  float: right;
  width: 320px;
}

div#intro h1 {
font-size: 14px;
color: #000;
}
div#intro h2 {
font-size: 12px;
color: #000;
}

div#innovate  {
float: left;
width: 300px;
padding: 0;
}

div#innovate p {
font-style: bold;
font-size: 12px;
color: #333;
  margin-top: 180px;
  margin-left: 20px;
}

div#ab  {
  position: relative;
  float: right;
  width: 355px;
}
div#ab ul {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0;
margin: 0;
}
div#ab li {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 15px;
}

div#ab li#about {
left: 0;
}

div#ab li#services {
left: 125px;
}

div#ab li#enquiry {
left: 270px;
}

div#ab li a {
text-decoration: none;
color: #000;
}
div#ab li a:link {
color:#000;
}
div#ab li a:visited {
color:#000;
}
div#ab li a:hover {
color:#006600;
}

div#contact  {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 11px;
margin: 10px;
margin-top: 50px;
padding:0px;
font-weight: bold;
  float: left;
  width: 300px;
  clear: left;
}

Note that within your HTML you can probably remove a lot of the <br />s and utilise widths, margins (on the headings) and line-heights.

Also note that I've kept most of your CSS intact - some of this can be eliminated throught the use of my favourite CSS rule (see below) and CSS shorthand.

* { margin: 0; padding: 0; } This rule gives you some cross-browser consistancy (it removes the browser-specific default style settings for ALL HTML tags) AND it saves space within the CSS file because you only have to declare padding/margin sizes when you need them!

Hope that helps - and apologies for the confusion!!

cheers,

Stuart

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 11 years 27 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

div not showing in IE6

* { margin: 0; padding: 0; } I have never seen that before? Is this a hack or an actual rule? can you apply any property to the asterix and it will affect every element on the page? pretty cool if so Shock

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

div not showing in IE6

Its not a hack gleddys but a valid selector the 'Universal selector' is every element of the Dom/page, so yes it's use as a selector on it's own would effect every element with the rule set written to it.

It can be mistaken for a hack as it often used to feed certain rules to IE only by placing it before the HTML element which is technically nonsense as there can not be any element higher than the html node in a Doc tree, but IE ignores that fact and processes the rules regardless, whilst FF will disregard the entire ruleset.

This thread discusses one of it's possible uses, indeed the way that stuart has used it.

http://www.csscreator.com/css-forum/ftopic8788.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

Yep, as I say, I always swear by it (instead of swearing AT the various browser default padding/margin values for elements!)

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

Stuart,

Thanks again for posting your code but look what I get with your version on IE5 and NS7 as a sized down screenshot:

compared to how the page should look:

Still not working across browsers but I can always just align the whole thing left and be done with it. Smile

Charlotte

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

div not showing in IE6

I made the following changes. It works in Moz/ Firefox, IE6, and Opera7. A little jiggering was needed for the #enquiry link since the spacing is not equal.

 
#wrapper { 
    position: relative; /*line added--required if containing AP elements*/ 
 
	 
#ab { 
    position: absolute; 
    width: 400px;  /*extends div beyond container so floats fit*/ 
    left: 350px; 
    top: 185px; 
    } 
 
#ab ul {  
    font-size:14px;  
    font-family: Arial, Helvetica, sans-serif;  
    font-weight:bold;  
    padding: 0px;  
    margin: 0px; 
    list-style: none; 
    }  
 
#ab li {  
    float: left; 
    width: 125px; 
    }  
 
#about {}  
 
#services {}  
 
#enquiry { 
    padding-left: 20px;  /*adds a little extra spacing to match  
                          graphic*/ 
    }
Image bound designs require careful placement. In this case, put the ul as a whole into place and play with the width and padding of the lis to match the graphic's spots.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

I have no access to my pc today but this is what it is now looking like on mac NS7:

here

and on mac IE5:

here

Stuart, I was thinking even if it wasn't image bound , it seems when you want divs placed within exact widths of each other in a non logical layout(as opposed to vertical flow of content) as soon as you try to center the content it will always mess up cross browser.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

div not showing in IE6

Using your 'c' version, c.html, the changes I posted create a page that is within pixels of your 'should look like' image.

:shrug:

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

NOTE: I intended to post this yesterday, but my computer went 'ga-ga'

jdl wrote:
Thanks again for posting your code but look what I get with your version on IE5 and NS7 as a sized down screenshot:

Hmmm, that's strange...

I don't have access to a Mac here, but I found your results an interesting challenge Smile so I thought I'd make use of the highly useful (for us PC owners) lixlpixel screenshot generator. Unfortunately, when I tested my version, I got:

which I found confusing, as it was supposed to be taken from Mac IE 5.2.3 - it seems a lot closer to the correct layout than your 'grab.

Now I'm REALLY stumped! Are you using a different version of Mac IE 5 (I understand that there were some changes when it went up to version 5.2)? Or is lixlpixel service flawed? (in which case, I suppose I should really check the page at Browsercam!)

The other thing that I find strange is the poor layout within Netscape 7. Again, I don't have this on my system, but I'm sure that it's based on the Gecko rendering engine running in Mozilla browsers (maybe slightly behind the most up-to-date), in which case, the page should be almost identical to Firefox.

Unfortunately, none of this actually helps YOU out, does it?? Right, perhaps you could switch to positioning everything absolutely, using em values to take any text resizing into account...

cheers,

Stuart

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

Gary,

Absolutely positioning the #ab container does work, but I was a little concerned with the visitor to the page resizing the text - if he/she does so, then the menu gets positioned on top of the contents of the #intro container...

If you do that, however, you would have to remove the grey discs from the main background image and put them on the background of #ab...

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

Sorry! I got you, Gary, mixed up with Stuart :oops:

Anyway, could either of you be so kind as to upload the page you are saying is working in your browsers and from that I can give you an exact screenshot because I may have made errors in pasting - I don't think I did but it's possible with the changes posted.

I use NS7.1 and IE5.2.3 on my macOS X system

On my pc I use IE6 and latest FF

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

I was ahead of you on that one, Charlotte (see the post with my screengrab Wink ) - it's here: http://www.stuarthomfray.co.uk/temp/brsnake/a.html

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

Ok , now that page comes up matching your screen grab and guess what? I've started from scratch Smile because I think my layout is stupid and image bound (as you say).
http://www.br0wnsnake.com/mac2.html is the new one and I'm sure you are sick to death of the page ....
but! I only need to get the bottom nav to match the top nav except be aligned or floating right. If your patience isn't completely worn out,
please point me in the right direction. Smile

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

Be aware that, although this works in Firefox, IE6 and Opera 8, I haven't been able to test it on IE5.x or Safari on the Mac (once again, I can only see Mac IE having possible problems here - problems that may be resolved by declaring display:inline-block on the floated elements)

Firstly, I've replaced the list within the #bar container as, semantically, they don't really make sense as a list. I've used paragraph tags, like this:

WAS:
...
<div id="bar">
<ul>
<li>&copy;2005&nbsp;natural&nbsp;matters&nbsp;design</li
><li><a href="#">flash&nbsp;version</a></li
></ul>
      <font color="#FFFFFF"></font></div>
</div>
</div>
</body>
</html>


NOW:
...
<div id="bar">
<p id="flashversion"><a href="#">flash&nbsp;version</a></p>
<p>&copy;2005&nbsp;natural&nbsp;matters&nbsp;design</p>
</div>
</div>
</div>
</body>
</html>

...and replaced ALL of the CSS rules relevant to the #bar container with:

#bar {
  width: 100%;
  border-bottom: 1px solid #000000;
  background-color: #CCFF99;
  margin: 0;
  padding: 0;
  border-top: 1px solid #000000;
  font-size: 0.6em;
  line-height: 1.2em;
}

#bar p {
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-align: center;
}

#bar p#flashversion {
  float: right;
  width: 25%;
}

#bar a {
  border-left: 1px solid #000000;
  background-color: #CCCCCC;
  color: #000000;
  text-decoration: none;
  display: block;
  float: right;
  width: 140px;
  text-align: center;
}

#bar a:hover, #bar a:active, #bar a:focus {
  background-color: #007F4C;
  color: #FFFFFF;
}

This, as I say, works in all the browsers that I can currently test with - I've uploaded the page to http://www.stuarthomfray.co.uk/temp/brsnake/v2/mac2.html if you want to take a look first (CSS is http://www.stuarthomfray.co.uk/temp/brsnake/v2/mac2.css if you want to check what I did - I've commented out your original #bar rules)

One other thing I've noticed, related to the semantics of your page, is the fact that you have an address contained within heading <h3> tags. An address is not a heading (he said, wagging his finger!! Wink ) - you should place this within <address> tags, like this:

<p>
<address>Joakim Ho<br />
'Skyview' <br />
Milne Road <br />
Armidale NSW 2350 <br />
Australia <br />
ph:(02) 6775 3945 <br />
mobile: 0419 261592 <br />
</address>
</p>

Yes, you still need line-breaks, and yes, you'll still have to apply your own styles to the <address> tag, but it now makes so much more sense to ANY visitor, whether using a graphical web browser or not!

In order to get used to this way of thinking, you should (if you haven't already) get hold of Chris Pederick's most excellent Web Developer extension for Firefox, turn off the style sheets, and then see whether your page still makes sense (you might notice something else about your page if you do this!) Alternatively, simply removing/renaming the stylesheet would give you the same effect.

Hope all that helps (and hopefully I haven't come across as TOO much of a pain in the ar*e! Smile )

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

WOW you know what I'm so impressed with coders like you is the way you can write comments in your files and somehow include the incorrect with the correct to explain it to newbies like myself! It makes my mind boggle- I'd love to be that advanced Laughing out loud

Well first of all, I had no idea there was even such a tag as address in css :oops: so I couldn't work out what the hell to put there and I knew a heading was wrong.

Testing your version which is now mine Smile in NS7 and IE5 on mac everything is perfect except in IE5 the flash version text doesn't center so I tried putting a text-align on that but it still doesn't want to- but who cares! Have I got everything else right? When I followed your initial instructions it didn't work so I instead followed the version you put up online. I don't know where I messed up first time around because it was very well explained.
http://www.br0wnsnake.com/mac3.html

Thank you so much for all your help, I'm sure plenty of other css newbies will get plenty of help from it as well.

A very happy Charlotte *cheers!*

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

jdl wrote:
...comments in your files...

Actually, I apologise if those comments came over as a little 'brusque', they were reminders for my post, and pointers for someone that I was talking to on the phone! I meant to remove them before actually posting a response!! :oops:

jdl wrote:
...except in IE5 the flash version text doesn't center so I tried putting a text-align on that but it still doesn't want to-...

That's strange - maybe it's something to do with that right float.... Anyway, as long as the page layout doesn't go too crazy in differing browsers (and it 'degrades gracefully' in lesser browsers!) then I suppose we're not doing too badly! Smile

One other thing I would do is to use a correct doctype (there's a selection of page templates here http://www.webstandards.org/learn/templates/index.html with doctypes). Personally, I always validate to a strict doctype, as I feel that once my HTML structure is solid, any other problems are CSS or browser-based (it may not sound like much, but realising that what you think is a CSS layout problem, is in fact a problem with your underlying HTML, would have saved me a load of time when I started using CSS layouts). Validating to a strict doctype (for me, anyway) gives me the feeling that I'm working on 'solid ground'!!

Other than that, the page looks fine!

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

How do you know which doctype to use out of the many listed
:?:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

div not showing in IE6

There are not that many listed really. Disregard any that are frameset and as Stuart has already mentioned use a strict doctype for new documents as it forces you to code in a disciplined fashion with no deprecated tags and attributes, preferable is an XHTML 1.0 as your page will benefit from the closer compliance with the XML standard, XHTML 1.1 should be disregarded as it is only used for serving up fully formed XML pages, but you can use a HTML 4.01 strict quite happily.

Search around the forum as there's more info to be found if needed.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

OK, Thanks.

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

Thought better keep this in the thread rather than waste more space, I'm havng trouble with FF and NS7 in line height for my nav. In fact I always seem to be having trouble with navigational bars! I must find a good tutorial on it.
Anyway the line is not flush up against the top in those two browsers and setting the height below 1em won't work but I can't see why.
Any suggestions please?

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 37 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

div not showing in IE6

Removing the line-height declaration altogether from the #nav rule seemed to work out OK on Firefox and IE6.

cheers,

Stuart

jdl
Offline
Enthusiast
Last seen: 14 years 29 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

div not showing in IE6

Thanks Stuart