Eeek! Opera stole my site! (Full Version)

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



Message

Nicole -> Eeek! Opera stole my site! (5/9/2006 5:18:40)

I might be new to CSS positioning, but I've just been working on my site, checked it in FF and IE and then uploaded it. Opened Opera to check it there and the contents of my page are missing?

Does anyone know why or where it is?

http://www.users.on.net/~nicoleoz/services.htm

Also, I get the feeling I'm not on top of things yet. I feel like I'm not "really" positioning anything and that things are just one under the other. Can someone who is CSS positioning savvy take a look and let me know whether my CSS is on the right track please.

Thanks

Nicole



jaybee -> RE: Eeek! Opera stole my site! (5/9/2006 6:16:38)

Well that's a good one!!!!! [:D]

It looks to me like Opera is rendering the body background over the top of everything else but I haven't kept up with Opera bugs so I can't be sure. I also haven't been through your code in any detail.

Try setting the background to transparent and see what it looks like in Opera.



jaybee -> RE: Eeek! Opera stole my site! (5/9/2006 6:22:19)

You've included your text resize menu inside a div (textresize) but left the div statements on the include so you get the following... 

<div id="textresize">
   <!--webbot bot="Include" U-Include="includes/textresize.htm" TAG="BODY" startspan -->
<div id="textresize">
<p><a href="#" onclick="setActiveStyleSheet('textSizeSmall', 1); return false;" title="">
<img class="left" src="images/text1.png" alt="smaller text" width="35" height="30" /></a><span class="aaavanish"> | </span>
<a href="#" onclick="setActiveStyleSheet('', 1); return false;" title="">
<img class="left" src="images/text2.png" alt="medium text" width="35" height="30" /></a><span class="aaavanish"> | </span>

<a href="#" onclick="setActiveStyleSheet('textSizeLrg', 1); return false;" title="">
<img class="left" src="images/text3.png" alt="larger text" width="35" height="30" /></a><span class="aaavanish"> | </span>
<a href="#" onclick="setActiveStyleSheet('textSizeXLrg', 1); return false;" title="">
<img class="left" src="images/text4.png" alt="largest text" width="35" height="30" /></a></p>
</div>

<!--webbot bot="Include" i-checksum="12487" endspan -->
</div>


Did you mean to do that? Div inside another div both with the same class?



womble -> RE: Eeek! Opera stole my site! (5/9/2006 6:23:00)

Hmmm, interesting one!

I've just had a look at the code and you've got two <div id="textresize">'s in there. When I took one of them out it displayed in Opera - mind you it totally messed the layout up as well! [:D] I suspect, though I can't work out why, it's got something to do with those identical <div>s.

<edit>
Mental note to self: practice typing faster to keep up with Jaybee [:D]
</edit>



jaybee -> RE: Eeek! Opera stole my site! (5/9/2006 6:25:21)

Beat ya! [:D]



Nicole -> RE: Eeek! Opera stole my site! (5/9/2006 6:26:26)

Thanks,

No I didn't mean to do it, are you kidding? I don't mean to do anything! can I blame it on my headache?

I'll remove one of those div's.

Thanks

Nicole



Tailslide -> RE: Eeek! Opera stole my site! (5/9/2006 6:28:41)

Get rid of position:relative in your container and the site reappears in Opera.



Tailslide -> RE: Eeek! Opera stole my site! (5/9/2006 6:31:53)

Other things I'd look at would be to make your navigation a list (then you can probably dump the menu div around it) and also make sure you've got a <h1> on there somewhere.

Edit: forget all the possible tiny tweaks though (cos you'll find those on every site on the web)- you're doing a great job there Nicole.



jaybee -> RE: Eeek! Opera stole my site! (5/9/2006 6:32:04)

You need to remove the the position relative on the container. It's relatively rubbish. [:D]

Oh and psssst

quote:

At NixDesign, tailor websites to your particular requirements and needs, we have the expertise and experience to know what works, and more importantly, what doesn't work on the Web. From clean, effective photography and other imagery to correct spelling, grammar


You're missing a we.

[edit]darn, parrot mode again.



Nicole -> RE: Eeek! Opera stole my site! (5/9/2006 6:35:07)

Ahhh.....there it is, thanks all.

I took out the div's from the include and did what tail said.

My next challenge is to make the footer appear at the absolute bottom of the screen despite the page length possibly being shorter. Any good links you know of about that?

Nicole



Nicole -> RE: Eeek! Opera stole my site! (5/9/2006 6:38:50)

Thanks Jaybee,

I forgot to mention that the text at the moment is just cut and pasted from places to fill up space. I'm not that concerned about it just yet, but will be when I come to re-write the content again, this time taking search engines into account.

When I said that I didn't feel that I was really positioning things, I meant that I'm using includes as you can see, but i read where you can position your content first in your code and everything else afterwards, but with the text-resize include I couldn't work out how to do that without putting it in the code exactly where I wanted it to appear on the page.



womble -> RE: Eeek! Opera stole my site! (5/9/2006 7:31:34)

quote:

ORIGINAL: Nicole
My next challenge is to make the footer appear at the absolute bottom of the screen despite the page length possibly being shorter. Any good links you know of about that?

You mean like 'glueing' the footer to the bottom of the viewport?



Tailslide -> RE: Eeek! Opera stole my site! (5/9/2006 7:37:06)

There's a couple of things that are hard to do with pure CSS layouts - centering (vertically and horizontally) is one. Getting the footer to stay at the bottom of the viewport is another. I avoid doing this because it needs a variety of hacks to get it to work well in all browsers.

Probably the best way of doing it is this: http://www.themaninblue.com/writing/perspective/2005/08/29/ But I have a feeling that it won't work well in IE7 (think I read it somewhere).

Not sure I'm getting what you mean about the includes... should be no different than having the markup in the page. I start with the markup all in the page and styled how I want , then remove the various bits to the include pages replacing them with the include "calls" and it should be fine.



Nicole -> RE: Eeek! Opera stole my site! (5/9/2006 7:37:46)

Yes, when there isn't that much on a page, I want the footer to be at the bottom of the viewport.

But when a page is longer than the viewport, it just remains underneath the last piece of content.

Am I saying this right?



womble -> RE: Eeek! Opera stole my site! (5/9/2006 7:38:54)

Hmmm, I'm sure I've seen something about this somewhere, but my bookmarks are playing hide and seek today! <hehe>

This is what I've found so far:

http://underscorebleach.net/jotsheet/2004/12/frames-with-css-layout (I don't think that's what you're wanting to do?)

Something similar to the Stu Nichols scrolling tables thingy? - http://www.cssplay.co.uk/menu/tablescroll.html

or possibly this? - http://themaninblue.com/writing/perspective/2005/08/29/ - there's a demo of a site with very short content, but the footer right at the bottom of the browser window.


<edit>
You posted before I'd finished typing! [:D] I think possibly the third one is the one you're thinking of?
</edit>

<edit2>And Tail beat us both! [:@][;)]</edit2>



Nicole -> RE: Eeek! Opera stole my site! (5/9/2006 8:05:07)

The man in blue one looks like it's what I mean. Thanks for the link Tail & Womble.

Unfortunately I really need to get this head on a pillow, hopefully it's not feeling the same tomorrow.

Thanks again, will ask more I'm sure tomorrow.

Nicole



Tailslide -> RE: Eeek! Opera stole my site! (5/9/2006 8:05:41)

Ha! Too quick for all of you today [:D]

Just to re-iterate Nicole - I would seriously suggest that you not try to have the footer at the bottom of the viewport. It is possible to do but you'll probably reduce the cross-browserness (oh look I made a new word!!) of the page. Plus you may be storing up problems for the future with IE7 and other new browsers.



Nicole -> RE: Eeek! Opera stole my site! (5/9/2006 8:13:22)

okay, I might forget it then, seeing as I'll possibly face cross-browsidity problems.

Night, night!



womble -> RE: Eeek! Opera stole my site! (5/9/2006 8:29:11)

I'd agree with Tail on this one. What you could do to stop the page looking too short if there's not much content on it is set a minimum height on your content <div>....but....(guess what)...that doesn't work on IE! (what a surprise!)

(http://www.quirksmode.org/css/contents.html)

What I did wonder is if using a transparent gif image would work? 1px by however long you want the minimum length of the page to be?



dpf -> RE: Eeek! Opera stole my site! (5/9/2006 9:39:22)

crossbrowsericity



caz -> RE: Eeek! Opera stole my site! (5/9/2006 14:54:29)

Do you come from Crossbrowser City, Ohio now [8|]



Nicole -> RE: Eeek! Opera stole my site! (5/11/2006 4:30:19)

Okay, I've lost my banner now.

It's been mentioned above that you shouldn't put <div's> in your include AND in the html, so I'm confused now, very confused. Where should I have them?

Nicole



womble -> RE: Eeek! Opera stole my site! (5/11/2006 5:01:07)

I'm not sure if there's a right or wrong way. I tend to put mine in the includes.



Tailslide -> RE: Eeek! Opera stole my site! (5/11/2006 6:14:26)

I'd normally just have the major div's content (sidebar for instance) just so I can see where the div actually is in the markup when I'm editing it. But there's no reason why one or other would make a difference.

Are you using SSIs or PHP includes?

Also, don't know what this does: 

<!--webbot bot="Include" U-Include="includes/banner.htm" TAG="BODY" startspan --><!--webbot bot="Include" i-checksum="0" endspan -->


.. well it looks like an include "call" but I've not seen it actually appear on the page before - is this a FrontPage thingy?



caz -> RE: Eeek! Opera stole my site! (5/11/2006 6:29:11)

Yes, that is a Frontpage include (which doesn't need extensions to work btw) and I usually put the div's in the main page, not in the included content page. It helps with editing as you say Tail.

Have you checked the path to your include?



jaybee -> RE: Eeek! Opera stole my site! (5/11/2006 6:37:44)

The problem with having the div in the page as well as in the include is that if you have specified some inherited styling/layout it will be applied twice. For example, if you have specified 50% then depending on what it is, you can end up with 50% of 50% in the included div.



caz -> RE: Eeek! Opera stole my site! (5/11/2006 7:23:36)

Your positioning is OK but you have missed the starting body tag in includes/banner.htm.

I don't call the stylesheet in the included file, but leave it to be styled by the css of the calling page; mainly for the reason Jaybee said.




Nicole -> RE: Eeek! Opera stole my site! (5/11/2006 16:53:17)

Thanks Womble, Tail, Caz & Jaybee,

I didn't have you all on "ignore", I've just slept 30 of the past 36 hours. I've heard that learning CSS positioning can be a headache, but this is ridiculous.

Thanks again

Nicole



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625