473,327 Members | 2,103 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Problem page IE clear float problem, Opera/FF header problem and N4

ima
http://www.kencoffman.com/templates.htm

I've been experimenting with float:left and I've been able to clear
those floats as far as Opera 8.02 and Firefox 1.0.6 but IE6 is a
problem. I've researched a bit and read about a hack but for some
reason I've been unable to get it to work. Perhaps I've missed some
subtle requirement like placed it in the wrong place in my css file.

If you view the page with Opera or Firefox, you'll notice another
smaller annoyance. A strip of white above the header. Maybe someone
can explain how that happens.

The N4 interpretation is ugly. The worst problem is that the right
column moves on top of the left column. I have no clue how to turn
this problem into page that could be read.

I've been told not to post code here so here is a link to a sample page
maybe that will be enough to give someone a clue as to what I've done
wrong. Thanks for your help.

Sep 11 '05 #1
6 1909
On 11 Sep 2005 13:27:55 -0700, ima wrote:
If you view the page with Opera or Firefox, you'll notice another
smaller annoyance. A strip of white above the header. Maybe someone
can explain how that happens.


change div#container {position:relative; to div#container
{position:absolute; top: 0;

Why have you set a max-width of 1000px on my display that means I get a
white line down the right hand side, setting it to 100% would sort it out.

There are a lot of validation errors on the page,
http://validator.w3.org/check?verbos.../templates.htm
sorting them out might help especially as you have defined a CSS "id" more
than once, something you can't do, you can however set "class" as often as
you like
Sep 11 '05 #2
ima
Thanks a lot for taking the time to look. I'm still learning and the
max-width was part of an example that I had. Your suggestion of 100%
makes much more sense to me. I can't think of any reason why anyone
would want to stretch a window larger that their monitor screen. As
for "id", it was my understanding that I could use multiple "id"s if
there were declared in a css file but I could only declare one within
the <Style> tags of html. Did I misunderstand???

Sep 11 '05 #3
ima
Thanks for taking the time to point out that link. I found out that
the vast majority of the errors were due to a habit of typing tags in
caps (which doesn't work so well with css). I've cleaned up the errors
that I could understand but I still have 8 errors which are suppose to
be missing quotes or tags but those quotes and tags are already there,
so I'm not sure what I can do to convince the validator that they are
there. I finally realized that the id that you were referring to was
mainimage which I did try to call several times. I've tried to change
that to a class but no I've lost my float left (along the image) format
in ALL browser versions.

Sep 12 '05 #4
On 11 Sep 2005 16:29:10 -0700, ima wrote:
As
for "id", it was my understanding that I could use multiple "id"s if
there were declared in a css file but I could only declare one within
the <Style> tags of html. Did I misunderstand???


Firstly Remember to quote what you are replying to.

You can use class as often as you like, you can only define an id once.
Sep 12 '05 #5
On 11 Sep 2005 17:41:33 -0700, ima wrote:
Thanks for taking the time to point out that link. I found out that
the vast majority of the errors were due to a habit of typing tags in
caps (which doesn't work so well with css).
As far as i'm aware that doesn't make any difference.
I've cleaned up the errors
that I could understand but I still have 8 errors which are suppose to
be missing quotes or tags but those quotes and tags are already there,
so I'm not sure what I can do to convince the validator that they are
there.
It hasn't helped that you have changed your Doctype declaration and not
really understood why, you have therefore left bits of XHTML in there that
are now causing problems.

Change your top 2 lines:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

as they are not compatable. I would suggest you go for a strict doctype,
such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
doing that and replacing the XHTML end tags " />" with HTML tags ">" will
sort all but three of the problems.

These are because your misusing the "a" tag, you can't have two "alt" 's
alt is for an alternative text if the pic doesn't display for whatever
reason. All your links should look like <a href="picture_path.jpg"><img
src="picture_name.jpg" alt="Alternative Text for Picture Here" width ="91"
height ="121"></a><p class="caption">Your_ Caption_Here</p></div>
Remember also to remove the spaces between " and 91" and " and 121
throughout your document, it will then validate.

I finally realized that the id that you were referring to was
mainimage which I did try to call several times. I've tried to change
that to a class but no I've lost my float left (along the image) format
in ALL browser versions.


Yes but you also have to change your CSS file, an id is prefixed with a #
a class is prefixed with a . and I notice that there are now no references
to id="mainimage" in your HTML file but that they are still in your CSS
file all you needed to do was change the repeated ID #'s for class .'s
Sep 12 '05 #6
ima
Rincewind, I REALLY appreciate your patience. I do have a book on CSS
which I really did read cover to cover but some things are still a bit
confusing. The author recommended "Strict" but included a line for
"Transitional" and "Frameset" so I used "Transitional" when I the
validator said that my code did not comply with "Strict".
Unfortunately, there was no explanation of options within those DOCTYPE
declaration lines. So you're quite correct that I don't yet know the
various option combinations. Then the book goes on to an example of
declaring an XML namespace. It was the only example and did not
mention how it would be different for "Transitional" or "Frameset"
DOCTYPE. Thanks for bringing that discrepancy to my attention. I'll
need to research that topic further since making the changes that you
suggested, I'm still getting validator errors in that section.

I knew that I had to have alt titles for each image but I made the
wrong assumption that images linked to images would also require them.
I've removed those.

I could find no spaces between quotes and numbers for width and height
but in desperation, I did remove spaces from between the "=" and the
quotes with numbers.
Yes but you also have to change your CSS file, an id is prefixed with a #
a class is prefixed with a . and I notice that there are now no references
to id="mainimage" in your HTML file but that they are still in your CSS
file all you needed to do was change the repeated ID #'s for class .'s


I attempted to create a new class to float my multiple images and text
to the left but I see that the declaration in the css did not get
"saved". Rather than try again, I took your suggestion and tried to
just change the "id" to a class.

After all the changes above, I still have eight errors according to the
validator. Two of them are in the first couple lines again and the
rest are phantom spaces before numbers and now the inside the closing
img tags. I tried retyping line 27 and validator still comes up with
three errors (spaces that show up nowhere other than the validator
display).

The end result is that now none of the browsers display my floats
correctly. Somehow making all these corrections has had the opposite
effect that I had hoped for. Now I'm hoping that once the errors in
the first couple lines are corrected (and I don't have a clue as to
what the validator wants me to do about those) but eventually, it will
all fall into place and display properly at least in FireFox and Opera
like when I started this adventure. It is important for me to learn
these rules (particularly regarding the DOCTYPE declarations etc. ) so
I do hope you'll keep those suggestions coming to get me to that point.

Sep 12 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Dariusz | last post by:
I am trying out a fully CSS-P layout (first time with floats) and am having problems with getting certain DIV's from displaying properly - or rather - they are being completely ignored. Below is...
10
by: NoSpan | last post by:
I have this page that has layout like the following: (no frameset) ---------------------------------------- | header | |--------------------------------------| | ...
5
by: Chris Beall | last post by:
See http://pages.prodigy.net/chris_beall/BeallSprings/WC.Deed%20GG.116-17.html using the CSS at http://pages.prodigy.net/chris_beall/BeallSprings/BSstyle.css The page is a transcript of a...
102
by: hug | last post by:
www.webmaster, was suggested that this ng could be a better place.] I've updated my test server to handle if-modified-since. I've noticed that the (old copies I run of) IE and Netscape seem...
2
by: ~john | last post by:
I'm trying to get my header to have 2 images, one for the top left and one for the top right. Here's a link to my page... http://levelwave.com/dev/div/index.html and will eventually be...
11
by: Benny123 | last post by:
Im very new to the who css lark so am struggling quite a bit. ive managed to build a basic div centred box with css embedded in my html. It looks fine in IE but loses all size in firefox. Any...
4
by: kumuda v | last post by:
Hi, I am new to web development. I have designed a main page using html and css, I am working in linux OS so I am using firefox. But the problem is with IE, where the entire contents and...
5
by: John | last post by:
Hi Suppose I want a header containing an image floated left and a list of horizontal links floated right. So I float the image left. I then do the following with the list: ul = float:...
1
by: thesti | last post by:
hello, i'm trying to design a web. in the header, i create an outer-div which consist of three inner-divs. the html looks like this <div align="center" id="banner-header"> ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.