|
I'm working on a website for work, just for fun, and I'm having a bit of trouble with one of the main elements. The entire page is enclosed in a DIV element of class "container." Next comes a DIV of class "header." Within the "header" DIV are two more DIV elements, classes "name" and "logo." These are used to hold the name of the company and the logo, oddly enough, with one set to float left, the other right. It's rather boring, I know, but I'm an engineer, not a designer. Still, it doesn't look bad. [^]
That's until you try scrolling down the page. The logo and name stay put in the browser window while the rest of the header moves up. That really wasn't what I intended, or expected. I thought that being in a containing DIV, these elements would position themselves in relation to the parent header DIV. I've tried modifying the position attribute through all the choices - relative, absolute, static, inherit, and fixed, but this behavior doesn't change. The parent container, header, has no float or position attributes, by the way, and I wonder if that might be where I should be looking for the solution.
Can someone provide some insight into where I'm going wrong with this?
Will Rogers never met me.
|
|
|
|
|
In your CSS, you have
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
position: fixed;
}
Change the position to relative
|
|
|
|
|
Wow! How the heck did you find that? I was looking in the master page where the actual images are referenced, and didn't think to look in the stylesheet. That particular bit was auto-generated by Dreamweaver, and I never even thought to question it.
Thanks! 
Will Rogers never met me.
|
|
|
|
|
Roger Wright wrote: How the heck did you find that?
Took a couple of seconds with the help of Firebug on Firefox browser. You can do similar with Google Chrome with the inbuilt tools or the Firebug-Lite add-in.
IMO, when you (or rather DreamWeaver) placed the image giving it a fixed position, it took the image out of the document flow.
|
|
|
|
|
That makes perfect sense. Dreamweaver attempts to overcome the shortcomings of certain browsers who will go unnamed here by clever optimizations. Sometimes they backfire, apparently. Probably a better fix would have been to add a position:relative attribute in the DIV class affected, rather than the generic img tag style inserted by DW; that would override the default behavior for just this instance. But I'll leave it for now. Thanks, again!
Will Rogers never met me.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin 
Submit an article or tip
Post your Blog
