homepage Welcome to WebmasterWorld Guest from 54.242.18.190
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS mistake #3 (classic case)
One browser's fix is another's problem.
ducksoup111




msg:1224254
 8:43 pm on Mar 9, 2003 (gmt 0)

I'm creating my first web page in note pad and it was going fine until I switched from IE to view it in Netscape 7.0. In netscape 7.0, the second of two borders, each around two paragraphs, placed side by side, changes its position and becomes slightly uneven relative to the first paragraph's border. It's very easy to adjust the values and make it look balanced in netscape but, as CSS mistake #3 predicts, it then loses its format in IE. Preceeding from the advice that it is easier to fix something in IE once it is okay in other browsers, I have the page formatted correctly in Netscape but am not sure how to proceed with fixing it in IE.

The strange thing is the only problem is with this second paragraph border, which is identical to the first paragraph border, which has no problem in Netscape 7.0 or IE. Like I said, I'm doing this in notepad so I don't have a URL to show you. I'll post the markup which isn't long, if it's not against forum rules.

Can anyone suggest anything? I'm so close to making it work in both browsers after many revisions.

 

SuzyUK




msg:1224255
 8:49 pm on Mar 9, 2003 (gmt 0)

Hi ducksoup Welcome to WW

Yes post some markup as long as it's not too long

Suzy

ducksoup111




msg:1224256
 9:36 pm on Mar 9, 2003 (gmt 0)

okay, I set the values so everything looks good in Netscape 7.0. The problem is with the border in block H5 and the word "ANNOUNCEMENT" which is inside the border. Viewed in IE the border position moves up and is then uneven in relation to its neighboring border in block H2. I also had to add non-breaking space entities to get the word "ANNOUNCEMENT" centered where I want it in netscape because it's not responding to margin-left. I could try "align"...(I forgot.) Anyway, the main problem is the border. Here's the mark up:

Note: I'm new to website building so don't worry about any other unrelated problems you might detect. I'll fix them later. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<STYLE TYPE="text/css">
<!--
a:link, a:visited, a:active {text-decoration: none;}
a:link {color:black;}
a:visited {color:black; text-decoration: none}
a:hover {color:black; background:white; text-decoration: none; }
a:active {color:black; background:maroon; text-decoration: none}
H1 { white-space : nowrap; color: black; font-size: 50px; font-family: impact, arial; line-height: 45px; display:inline }
.newdiv {
border: 0px solid #000;
width: 100px;
}
#div2 {
border: 0px solid #000;
width: 100px;
}

H2 { white-space : nowrap; position: absolute; left:5px; top: 110px; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; border: 3px double white; text-indent: 21px; }

span.y { white-space : nowrap; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; margin-left: 160px; margin-right: 0px }
.wide { white-space :
nowrap; color: black;
font-size: 17px;
font-weight: bold; font-family: arial;
line-height: 19px; margin-left: 100px;
margin-right: 0px;
padding-right: 0px }
.wide a:hover {background-color:
white}

p { white-space : nowrap; color: white; font-family: arial; font-size: 17px; font-weight: bold; border: 3px double white; margin-right: 400px; padding-right: 135px }


span.j { white-space : nowrap; color: black; font-family: arial; font-size: 17px; font-weight: bold; border: 3px double white; padding-right: 140px; }
span.t { white-space : nowrap; color: white; font-size: 15px; font-weight: bold; margin-right: 100px }
span.w { white-space : nowrap; color: black; font-size: 15px; font-weight: bold; margin-right: 100px; }
span.g { text-indent: 95px }
span.z { text-indent: 10px }
H6 { white-space : nowrap;
position: absolute; left:5px;
top: 355px;
color: black; font-size: 17px; font-weight: bold;
font-family: arial; line-height: 19px; border: 3px double white; text-indent: 21px; }
span.q { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-left: 20px; margin-right: 0px; padding-right: 0px }
span.m { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 100px; margin-left: 10px }
span.c { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 0px; margin-left: 20px }
span.x { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 0px; margin-left: 40px }
span.e { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 0px; margin-left: 45px; }

H5 { white-space : nowrap;
color: white;
font-family: arial; font-size: 17px;
font-weight: bold;
border: 3px double white;
margin-right: 0px;
padding-right: 9px;
padding-left: 18px;
padding-bottom: 52px }
-->
</STYLE></HEAD>
<BODY BGCOLOR="#999900"><br>
<H1><IMG SRC="My Pictures/giftbox.jpg" WIDTH=70 HEIGHT=52 BORDER=0>
<a href="site.html">SITENAME.COM</a><span class="t">texttexttexttexttexttexttexttext!</span></H1>
<H2><a href="link.html">TEXT LINK ONE</a><span class="y"><a href="link">TEXT LINK TWO</a></span><span class="y"><a href="link">TEXT LINK THREE</a></span>&nbsp;&nbsp;&nbsp;</H2>
<div id="newdiv" style="position: absolute; top:150px; left:5px;"><p>LEARN ABOUT TEXT LINKS:<br><br><a href="link">TEXT LINK FOUR?</a><br><a href="link"><color: white>TEXT LINK FIVE</a><br><a href="link"><color: white>TEXT LINK SIX</a><br><a href="link">TEXT LINK SEVEN</a><br><br><a href="link">TEXT LINK EIGHT</a><br><a href="link">TEXT LINK NINE</a><br><a href="link">TEXT LINK TEN</a></p></div>
<div id="newdiv" style="position: absolute; top:139px; left:375px;"><H5><span class="g">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;~ANNOUNCEMENT~</span><br> <br> <span class="w">3/5/03 - sample text </span></H5></div>
<H6><a href="link">HOME</a><span class="q"><a href="link">ABOUT US</a></span> <span class="x"><a href="link"></a></span> <span class="m"><a href="link">TEXT LINK ELEVEN</a> <span class="c"><a href="link">PRIVACY POLICY</a></span> <span class="e"><a href="link">TEXT LINK TWELVE</a></span>&nbsp;&nbsp;&nbsp;</H6>

[edited by: Nick_W at 11:14 pm (utc) on Mar. 9, 2003]
[edit reason] Fixed heavy scrollism [/edit]

SuzyUK




msg:1224257
 11:02 pm on Mar 9, 2003 (gmt 0)

Hi ducksoup111

that was a bit too long ;) don't be surprised if some of it gets edited out (see the charter [webmasterworld.com]) usually small code excerpts pertaining to the problem area of code are fine...

re: your alignment problem...
Have a look at the (inline) positioning styles you have given to both the newdiv classes - the top: settings in particular.

You're right there are a lot of things in there you will need to correct as you learn.

There is one thing I did notice which will cause basic errors in some browsers

.newdiv in the stylesheet
is called a class and should be used when there is more than one instance on a page, it should be called e.g.
<div class="newdiv">

not <div id ="newdiv"> which would look like #newdiv in the stylesheet and should be used if there is only 1 element on the page

be sure to read Nick's tutorials [webmasterworld.com] on this forum, it's a great starting point

GOOD LUCK
Suzy

ducksoup111




msg:1224258
 12:46 am on Mar 10, 2003 (gmt 0)

Sorry about that. I won't post mark up again.

I took a look at Nick's tutorials. Didn't see anything that addressed my problem. Looked pretty basic. I change the div "class" thing. It didn't have any effect. I'm still looking for suggestions if anybody has any.

SuzyUK




msg:1224259
 9:17 am on Mar 10, 2003 (gmt 0)

Hi again,

the answer to your "border alignment" problem is in my previous post:
re: your alignment problem...
Have a look at the (inline) positioning styles you have given to both the newdiv classes - the top: settings in particular.

;) This was meant to help you look at the right area in your code as we like to help others to learn for themselves.. :)
Here's the extracts from your code:-

<div class="newdiv" style="position: absolute; top:150px; left:5px;">
<div class="newdiv" style="position: absolute; top:139px; left:375px;">

In the above you are telling the two divs to be at different distances from the top of your page..but that's not what you want..

The .class/#id issue was only a tip for your future coding to help avoid some of the most basic errors.
In this case it has actually changed something. Try viewing with NN7 and look at the width of your boxes.. this is because the "newdiv" that you have the content nested in is now being applied (it wasn't before) so NN7 is taking the specs from .newdiv and according to your CSS you want this to be 100px wide. IE is doing its usual "presuming it knows better" thing....the reason your content is staying at its required width is the nowrap in your other styles.

Nick's tutorial will help avoid some of these errors and explain the syntax.

Suzy

ducksoup111




msg:1224260
 2:29 pm on Mar 10, 2003 (gmt 0)

Well, I removed the "no wrap" from H5 and set that div "top" value to 150px like so:

<div class="newdiv" style="position: absolute; top:150px; left:375px;">

btw- I originally had it set to 150, the same as the other division, but changed it to 139px to make it even in Netscape 7.0. At 150px it now looks even in IE but is back to being uneven in Netscape 7.0. Could the padding I've applied to H5 be causing the imbalance? Sorry, not sure what you're suggesting with the width. I'll try setting it to a value of 50 and see what happens.

SuzyUK




msg:1224261
 4:19 pm on Mar 10, 2003 (gmt 0)

Ducksoup

Could the padding I've applied to H5 be causing the imbalance?

Yes very possibly...the entire center blocks shouldn't really be wrapped in <h#> tags it would be better to wrap them in their own divs and only use heading tags for when it is actually a heading.

The width thing..the two center content divs are only set to be 100px wide which I don't think is what you want..it's showing up Ok in IE but in NN the content is overflowing the sides of the columns so I presume you want them wider..

Suzy
;)

ducksoup111




msg:1224262
 9:11 pm on Mar 10, 2003 (gmt 0)

You mean the "text" is over-flowing the sides (borders?) of the columns? That's weird, because I don't see any major width or overflow problem in Netscape 7.0. All that I see is the right center border is a little higher than the left center border. Changing the width value in #newdiv to 200px (even 800px) had no visble effect in Netscape or IE. Something's overriding the #newdiv width value.

It's a shame because, from my perspective, I'm very close to having the page look the same in both IE and Netscape 7.0 but you seem to be indicating there is an additional problem which I don't see. Correct?

ducksoup111




msg:1224263
 9:37 pm on Mar 10, 2003 (gmt 0)

Suzy,

I know why it's overlapping in your NN. Is your text-zoom set higher than 100%? Try setting it on 100% and it shouldn't overlap. I suppose, with a little tweeking, I can hopefully get it to not overlap in the larger text sizes.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved