/    Sign up×
Community /Pin to ProfileBookmark

css elastic images in firefox and styled links active area issue. validated

Copy linkTweet thisAlerts:
Jun 27.2007

Hello,

I am having 2 separate issues with my CSS that I will list in order. I would really appreciate any help I can get. The test site is located at: [URL=”http://www.therainforestsolution.com/new_index.html”]http://www.therainforestsolution.com/new_index.html[/URL]

[B]1.)[/B] I’ve been working the last couple hours attempting to fix the weird way my links are behaving within my main navigation menu after they are styled. I found the guilty lines in my css that are conspiring against me, namely, my ul { margin-top: -60px; } (line 71) and the ul a { line-height: 30px;} (line 84). With the active, clickable area completely dependent on the line-height area the problem is that neither is willing to respond by moving along with the text and negative top-margin. Mad!

So, as I move the text in the navmenu up with the negative margin, the clickable area is reduced. The only relationship the active area (line-height) and the negative top-margin has is the text. Only the text that is within the apparently unmovable line-height area is clickable so with a -15px top-margin for example, only half of the text is clickable because the top half is outside of the clickable-area, and a -60px, which is where I want it, is completely outside of the unmovable line-height “clickable” area.

I thought to enlarge the line-height to something like 75px but it creates a huge blank space below the navigation menu.

[B]2.)[/B] I ran into an issue with my floated liquid images around the same time I went back and added the margins (also in percentages), even though I was careful not to go over 100% width (removing the margins again doesn’t fix anything so this is just conjecture). The problem only occurs in Mozilla and doesn’t occur in IE6.

It seems when I shrink the browser window in mozilla after a certain point the liquid images pop into their full size and are no longer liquid unless I maximize the browser window and hit refresh. The paragraphs take up the entire width of the div and the images, at their full dimensions, drop below the paragraphs. I have all the css for this in an external stylesheet [url]www.therainforestsolution.com/articles.css[/url]

Thanks,
-B
[URL=”http://www.therainforestsolution.com/new_index.html”]http://www.therainforestsolution.com/new_index.html[/URL]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 28.2007 — 1) Remove the position:relative from #masthead css

2) I cannot see the problem you are refering to with FireFox 1.5, but I highly discourage resizing of images by the browser - the image quality suffers as a result. A higher screen resolution is usally linked to a physically larger screen, so the normal perception is to see more of the content, not see the content larger.
Copy linkTweet thisAlerts:
@indigitalauthorJun 28.2007 — Thank You, removing position: relative; from the #masthead made my links work great. I would have never guessed.

The elastic images code was something I learned in "CSS Mastery" by Andy Budd and I've been boycotting learning anything to do with static pages. But with all the trouble I'm having I guess I will make them fixed dimensions.

Thanks Again,

B
Copy linkTweet thisAlerts:
@CentauriJun 28.2007 — You can still make quite fluid pages with fixed image sizes. You just have to decide what behaviour the page is to have when resized - things like text areas expanding with resize, images seamlessly sliding over each other, etc. For example, if the main background image of your header was wider, the right hand graphic can sit over top and look like it is the one graphic. Similarly, if the navigation bar background was much wider, the rounded ends could be a white / transparent graphic sitting over top which masks off the background according to width. Trick is to make fixed size graphics [B]look[/B] like they expand by combining more than one graphic, for instance the header on my site is actually two floated graphics with a repeating graphic in between, but it [B]looks[/B] like it stretches.

Cheers

Graeme

PS: the relative position on #masthead was making the negative margin pull the navigation [I]behind[/I] the div instead of in front of it.
Copy linkTweet thisAlerts:
@indigitalauthorJul 03.2007 — Yes, I did take a look at your website and thought what you did with your header was a great trick, so I did something similar for my masthead. I posted the webpage as my index at therainforestsolution.com already but there was one issue I found mildly troubling. Namely, the absolute positioned leaf, of the right hand-side of my masthead "travels" with the shrinking of the browser window right over everything in its path.

I wonder if theres any way to force it to stay put after a certain point. Like something to the effect of a max-left: 250px; or something. I wouldn't know what to type in google to search for this solution otherwise I would have already, any thoughts? By the way, thanks for your response centauri, I've been to several online forums and most of them completely ignore my posts, I am a loyal to webdeveloper visitor already.

-B
Copy linkTweet thisAlerts:
@webStruck_Jul 03.2007 — #rtlogo {

background:transparent url(indeximages/logo-rt.png) no-repeat scroll 0%;

[B]float:right;[/B]

height:189px;

[B]margin:-160px auto;[/B]

width:240px;

}[/QUOTE]

try if it works. ?
Copy linkTweet thisAlerts:
@indigitalauthorJul 03.2007 — ^ This guy,

[B]
[CENTER]GEEENIUS![/CENTER]
[/B]
×

Success!

Help @indigital spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...