473,804 Members | 3,748 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 1927
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:relat ive; to div#container
{position:absol ute; 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_p ath.jpg"><img
src="picture_na me.jpg" alt="Alternativ e 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
"Transition al" and "Frameset" so I used "Transition al" 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 "Transition al" 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
2306
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 a copy of the code I have written. It is arranged as follows: Header Left Middle Right Footer The "Left" and "Right" DIV's are fixed width and the "Middle" DIV takes the
10
4649
by: NoSpan | last post by:
I have this page that has layout like the following: (no frameset) ---------------------------------------- | header | |--------------------------------------| | div1 | div2 | | | | |-------------------| | | div3 | | | | |
5
2297
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 deed. I'm trying to retain, somewhat, the layout of the original document. Below the deed are the signatures (on the right) and the names of witnesses (on the left), hence paired blocks of text.
102
6826
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 never to send if-modified-since. But the strange thing is that Opera sends if-modified-since but when I reply with "HTTP/1.0 304 Not Modified" it is not refreshing the screen from its cache, it is leaving the screen blank.
2
1692
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 images but what I'm wanting is for the to be aligned left and to be aligned right. As of now they're both squished to the left and I'm not sure how to change my CSS to do this.
11
2531
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 sugestions guys. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
4
1840
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 images is re-positioned . the page looks entirely different. Please anyone can help me in this regard. Here is the css and html code home.php <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="healthy dining...
5
15587
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: right li = display: inline li a = display: block; float: left
1
1888
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"> <div id="left-column"></div> <div id="center-column">
0
10337
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10082
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9160
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6854
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5525
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5654
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4301
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3822
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2995
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.