Forum Moderators: not2easy
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.
Yes post some markup as long as it's not too long
Suzy
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> </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"> ~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> </H6>
[edited by: Nick_W at 11:14 pm (utc) on Mar. 9, 2003]
[edit reason] Fixed heavy scrollism [/edit]
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
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.
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.
<div class="newdiv" style="position: absolute; top:150px; left:5px;">
<div class="newdiv" style="position: absolute; top:139px; left:375px;">
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
<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.
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
;)
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?
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.
