Stumped by this one! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

c1sissy -> Stumped by this one! (12/7/2005 8:26:49)

http://www.tourism.org/london2.htm

This works on my machine, but when I load it up, it falls apart. I can't seem to find out what the problem is with it.

Should be simple. [sm=yikes.gif]



Tailslide -> RE: Stumped by this one! (12/7/2005 8:43:16)

Which bit is going wrong - it looks fine to me except the citysubjectlnks list which is breaking - if you add clear:both; to the ul then it will push it past the yellow paragraph - if that's what you wanted...



c1sissy -> RE: Stumped by this one! (12/7/2005 8:58:48)

OOPS, sorry, used the wrong one,
http://www.tourism.org/london2.htm
Ok, now I used an IE condtional, and in ie the conditional code is showing up, what did I do wrong? I think it might work if I can get this fixed?

I'm totally going crazy.



spitfire -> RE: Stumped by this one! (12/7/2005 9:09:18)

enclose that second conditional comment between its own <style></style> tags[;)]



c1sissy -> RE: Stumped by this one! (12/7/2005 9:14:49)


quote:

ORIGINAL: spitfire

enclose that second conditional comment between its own <style></style> tags[;)]


Ok, now I know I have to do an @import for this, so since it has been so long and I feel brain dead with this, how to accomplish the @import style sheet?



spitfire -> RE: Stumped by this one! (12/7/2005 9:34:34)

The first solution worked did it ? i.e. got rid of the text in IE.
for importing stylesheets, this may help ( about a third of the way down the page)
http://www.htmlhelp.com/reference/css/style-html.html



dpf -> RE: Stumped by this one! (12/7/2005 9:38:48)

spit: what is the difference between using link and import? thanks



c1sissy -> RE: Stumped by this one! (12/7/2005 9:58:40)

Actually as the mod, I deserve to be whipped a million times with a wet noodle. I did not validate the addition to the site, I was missing the " 's on the addition of the nav to the page in the xhtml code!

Now view it. no conditional is needed, code works, only thing is that in IE I have a white line at the top of the right header?

Any clues?

both headers are the same size? Not sure what is causing this. I have all padding zeroed out.



spitfire -> RE: Stumped by this one! (12/7/2005 10:07:51)


quote:

ORIGINAL: dpf

spit: what is the difference between using link and import? thanks

It's all a bit ethereal really Dan - just part of the mystique and probably down to personal preference a lot of the time. As ever - ask two developers the same question and you'll get two different answers and five "on the other hand"s.[:D]

FWIW, IMHO and all that. They both call up styles that are external to the document. I use link for "persistent" stylesheets that are used throughout the site and import for messing with conditional comments for IE. You have to ensure these comments are called after, therefore, over-ride all the other style calls in the document. Assuming you're not messing with inline styles as well, the best place to call them is within the <style> tags. I suppose you could use IE conditionals with link as well, but can't be a**sed to bother to find out[8|].

To complicate matters further you can also import a stylesheet into another stylesheet and another one into that - ad infinitum. That can cause some particularly interesting maintenance issues [:@]

Off Topic: Various methods of calling stylesheets can have differing/bad effects on earlier versions of some screen-readers, but only when the developer uses display:none or visibility:hidden styling.



spitfire -> RE: Stumped by this one! (12/7/2005 10:23:29)

quote:

ORIGINAL: c1sissy

Now view it. no conditional is needed, code works, only thing is that in IE I have a white line at the top of the right header?

Any clues?

both headers are the same size? Not sure what is causing this. I have all padding zeroed out.


Looking at london2, there is what may be a superfluous div in there called "rightcolumn". Firefox is ignoring it because it and I don't think it exists in the stylesheet. It could be that IE is kindly holding a default space for it.[8|] Have you tested the page in Firefox?

Edit: ah you confudulated me 'cos you're using two different naming conventions for the divs. It does exist in the style sheet. Back to the drawing board.



c1sissy -> RE: Stumped by this one! (12/7/2005 10:38:16)

quote:

Edit: ah you confudulated me 'cos you're using two different naming conventions for the divs. It does exist in the style sheet. Back to the drawing board.


LOL! sorry to confuse you!

I have to step out for a while. Seems that the dr that did my sons physical for school forgot to sign some things on it. Son can't swim till this is fixed.[:@][:@][:@]



Tailslide -> RE: Stumped by this one! (12/7/2005 10:43:16)

quote:

ORIGINAL: dpf

spit: what is the difference between using link and import? thanks


/butting in

Couple of useful things to know is that if you just use an @ import to link your styles you can end up with a nasty case of FOUC (flash of unstyled content) - If you use a normal <link> to link to your stylesheets you get round this problem.

Useful reasons to use @import = NN4 doesn't recognise it at all so it spits out completely unstyled content, which as long as it's logically written is preferable to it's appalling attempts at dealing with CSS.

I've started using a <link> to a stylesheet which has nothing in it except a @import call to the actual stylesheet - thus dealing with FOUC and NN4 in one fell swoop. Plus I can add other stylesheets or change the stylesheet name completely and then just change it in one place - the <link>ed to stylesheet - behaves like an include.

/butts out again



caz -> RE: Stumped by this one! (12/7/2005 10:43:29)

quote:

ORIGINAL: dpf

spit: what is the difference between using link and import? thanks


Importing hides the stylesheet from NN4, so that the poor thing doesn't get confused. [;)]

I serve a basic stylesheet for NN4 and then import the real one, like this, 
<link rel="stylesheet" type="text/css" href="simple.css" />
<style type="text/css">@import "bep3.css";</style>



c1sissy -> RE: Stumped by this one! (12/7/2005 10:46:22)

quote:

Importing hides the stylesheet from NN4, so that the poor thing doesn't get confused

[sm=rotfl.gif]
Hey caz, any suggestions on my white line in IE?



spitfire -> RE: Stumped by this one! (12/7/2005 10:54:34)

quote:

Hey caz, any suggestions on my white line in IE?


Butting back in:[:D]
remove the bottom margin on div#headernav
remove top margin on #navright
Maybe put a top margin on <h1> because it's a little squozy then.



caz -> RE: Stumped by this one! (12/7/2005 11:02:49)

Or take the height off that top left div, 
div#headerleft {
		width: 200px;
		float: left;
		/*height: 60px;*/
		color: #000;
		background-color: #b3c0eb;
		}


Sorry to butt back and back, Spit [:D]

Edit: Or maybe not!



spitfire -> RE: Stumped by this one! (12/7/2005 11:39:07)

Idiot Spit,
So it wasn't the 10px gap between the right navigation and the horizontal navbar then?
It was the 5px(or so) gap under headerright, so it was?
I still get the white gap having tested caz's solution. Which just goes to prove I've lost my marbles.[8D]

If I am not alone, one solution is to nest the two opposite floating headerleft AND headerright divs within a header div with the blue background.



caz -> RE: Stumped by this one! (12/7/2005 11:46:41)

That's a good suggestion Spit, but it may also be complicated by the includes there. The original author should fiddle a bit more [;)]



c1sissy -> RE: Stumped by this one! (12/7/2005 11:55:40)

fiddle dee dee fiddle dee dooo argh!

Not sure why its in there. I have tried several things to remove it. But not working. And yes, due to the includes, I think I need to leave as it is.

Weird thing is, if I increase the right side to say 63 it goes away (I think that is what it is) But, then it pushes it to the other side!

Must be some sort of ie bug. argh.

edit: how about the image as a background on the left?

off to eat lunch, nice grilled chicken salad, mmmmmmm



jaybee -> RE: Stumped by this one! (12/7/2005 13:07:24)

quote:

what I would describe as "tourist museams", which actually proved to be quite fun and even a little bit educational. (The Tower of London, Madame Trousseau's Wax Museum


ummmmmmmmmmm

what I would describe as "tourist museums", which actually proved to be quite fun and even a little bit educational. (The Tower of London, Madame Tussaud's Wax Museum



jaybee -> RE: Stumped by this one! (12/7/2005 13:09:11)

quote:

London visitors will find the city to be a clean and welcoming city where the great diversity of world culture, as well as youth and business culture, peacefully mix despite - at the very least, considerable differences in daily attire. :)


EH? Which London was this?



spitfire -> RE: Stumped by this one! (12/7/2005 13:51:37)


quote:

ORIGINAL: c1sissy

Weird thing is, if I increase the right side to say 63 it goes away (I think that is what it is) But, then it pushes it to the other side!


give the other side a fiddle dee doo daargh, then[;)] - add the same height to both, 64px worked for me.

It does seem, however, from a higher authority, that the problems you are experiencing are down to typos in the body text and to not understanding the nature of Londoners. So I offer another typo:
<!--webbot bot="Include" U-Include="includes/toruismrightheader.htm" TAG="BODY" startspan -->
May not be relevant today, maybe not tomorrow, but soooooon and for the rest of your life.[X(]

Sorry to crash your party ladies, I'll just get my coat.[:D]




c1sissy -> RE: Stumped by this one! (12/7/2005 14:01:44)

quote:

give the other side a fiddle dee doo daargh, then - add the same height to both, 64px worked for


HUH? I tried that, but will again, thanks, but the only problem I see is that it is blue under the graphic, and its not supposed to be. Ruins the gradient that is in there. [&o]



spitfire -> RE: Stumped by this one! (12/7/2005 15:03:27)

---- sigh ---
things I have tried:

make both divs 64px - removes the white gap on the right side - logo image looks exactly the same as it always did in IE

but that's not right - re-read the thread, Spit - what was the problem?
initially and explicitly - "it (the page presumably) falls apart".
then - wayward code appearing as plain text on the page - offered a solution
next - but I really wanted to import that code - how to do that? - searched bookmarks and posted a link
followed by - oops didn't validate, but what about the white line at the *top* of the right header - I can't see it but maybe we are talking about the white gap at the top of the right column - offered a solution - rubbish - caz to the rescue with a solution to the white gap at the "bottom" of the right header - further (and standard) method of nesting floated divs offered but that is going to get mucked up by includes - hunh?[sm=yikes.gif]

Now nothing for it but to look at that graphic in Firefox - aha gradient all the way to the bottom, hotlink that logo image - try making the height 56px - works but the graphic would have to be made 4px shorter if it is to remain an image in the html - dilemma should I suggest that? - could be dangerous ground so make it a background image then - return both divs to 60px and all appears to be well.

Test by text-size increases in IE - no overflow of the white <h1>. Test in Firefox - the white <h1> starts to break at quite a few increases (9) - probably good enough - will have to be with a fixed height set, anyway.

Now there is no image in the html if a permanent link to home page is required - but that's another tale, for another time, on another thread. [:D]

Ladies can be just as demanding as my old father said.
Your servant, m'am [image]http://easy.go.is/hubs/Misc/bowdown.gif[/image]



c1sissy -> RE: Stumped by this one! (12/7/2005 15:53:13)

Hi spitfire, I have read this, but at this moment its not making sense, exhasted, but will be back, and thank you for your work on this. It is very much appciated.

and yes, initial thing was the page was falling apart. Then as we find things, other things happen, as is the way with css.

this is a statement that only dear womble will understand, I used all my spoons up yesterday, so today am runing a bit short. [;)]

ttfn, and thanks spitfire, I shall return in a while.[;)][sm=kiss.gif]



jaybee -> RE: Stumped by this one! (12/7/2005 16:53:06)

quote:

give the other side a fiddle dee doo daargh


Does that validate? [;)]

Keep up the good work Spit me old lad, you're going great guns! [:D][:D]



jaybee -> RE: Stumped by this one! (12/7/2005 16:54:36)

Deb, read Spit's post again

quote:

"includes/toruismrightheader.htm"



c1sissy -> RE: Stumped by this one! (12/7/2005 17:03:03)


quote:

ORIGINAL: jaybee

Deb, read Spit's post again

quote:

"includes/toruismrightheader.htm"



I will Jaybee, honest. If not tonight I'll be back tomorrow,[;)]

Oh, and spitfire gets first dibs with the wet noodle, lol



spitfire -> RE: Stumped by this one! (12/8/2005 5:29:43)

quote:

ORIGINAL: jaybee
Keep up the good work Spit me old lad, you're going great guns!

I well remember a day during the Great Unpleasantness of 1939-1945. I was sitting on the runway all revved up and raring to go. Along came my young pilot whose training had been on an entirely different aircraft. We took off and had a go.
When we landed, he went to the mess for his lunch and I dragged meself to the hangar. I was feeling... a lot like this thread really[:D]



c1sissy -> RE: Stumped by this one! (12/8/2005 6:40:36)

LOL@spitfire!

Ok, spitrife, I change the thing corrected the spelling, but still no go in disappearing. The thing is still there.

I'm wondering if I create a header div with the left and right in there. I don't think it will interfer with the includes. I might have to mess with positioning, but maybe it will work better to contain those in one div?

I don't understand what went wrong, it was fine when I had just the one nav on the right, I added the second nav on the right, and the line appeared. I looked at the style sheet again lastnight.

Not sure where the problem lies right now. heavy sigh.



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375