Different sizr site in different browsers

@jessiewMay 06.2010

I have this problem my site works fine in ie not firefox and not in either on small monitors.I was wondering if someone knew how i could fix this please and thanks

to post a comment

PHP

24 Comments(s) _↴

@DeatzoSeolMay 06.2010 — #This probably doesn't belong in the PHP forum, but most likely, your problem is your HTML and CSS. Did you use Dreamweaver or another WYSIWYG-tool?

Can you post more information? What does the site look like in Firefox? etc

@canadacatmanMay 06.2010 — #It dont look too bad but is weird on the smaller monitors there is a 120by600 banner to the far right on the small monitors you can not see it all

site is www.charitysearches.com

thanks

@canadacatmanMay 06.2010 — #I did not use anything i loaded it direct from the folder it came in.thanks

@Jarrod1937May 06.2010 — #I'm assuming you copied the code or an editor put this in, but in your css there is this line:
overflow:-moz-scrollbars-none;
[/QUOTE]

Which will do as it says, in firefox have no scrollbars. If you experience a loss of scrollbars always look at any "overflow:" css options as being at fault to start.

@canadacatmanMay 06.2010 — #It does have that should i change it to something else.thanks

@Jarrod1937May 06.2010 — #It does have that should i change it to something else.thanks[/QUOTE]
Yes, you should remove it ?

That is the line that is causing it to misbehave on smaller screens and in firefox, because the scrollbars are hidden even though the viewport size gets smaller than the site, and thus needs the scrollbars.

@canadacatmanMay 06.2010 — #Ok its gone but can you tell me why the site looks different on smaller monitors do a search on the site please and thanks www.charitysearches.com(just a demo) and look to the right you will see a 120by600 banner if you have a smaller monitor you cant see it all.thanks

@Jarrod1937May 06.2010 — #It is because of that line, which is still in your css file:

http://www.charitysearches.com/style.css

line 11

@canadacatmanMay 06.2010 — #so what do i need to do to it.thanks

@Jarrod1937May 06.2010 — #so what do i need to do to it.thanks[/QUOTE]
Remove that line...

@canadacatmanMay 06.2010 — #Ok i did but puts scroll bar there look in firefox www.charitysearches.com and do a search

thanks

@Jarrod1937May 06.2010 — #Shows fine for me at 800x600, though of course with a vertical scrollbar since you only have 600 height and are using about 200 of it with your header (and truthfully you only have 580 or so pixels of that height for the browser viewport to begin with).

If you want it all to show, you need to determine what the average resolution your visitors will have and design for that, otherwise you need to allow scrollbars or else the content will just be cutoff with no way for them to scroll to see it.

Edit: Though i am a little thrown off. It seems your search is not an insite search, nor is it at least a customized google search. Instead it searches google for whatever term i want, so if i type "video games" on your "charity" search i'll get links to video game sites...

@canadacatmanMay 06.2010 — #so maybe make the header smaller so are you saying the search is no goog.thanks

@Jarrod1937May 06.2010 — #The search is fine... for what it is. However, i get the vague feeling the banner section is meant to be ad space and you're hoping to profit off of an iframe that simply searches directly to google, yahoo and the like.

Basically, what use is your site then? If all your search does is display google through an iframe, it doesn't do anything to make it more useful than directly going to google. Unless i am missing the purpose of the site. Do you get money that goes toward charity if someone searches through the site? Or is that what the banner is? Even if thats the case, you'll want to contact each search engine directly and get permission to profit (even if its for charity) off of their sites.

As for advice on possibly making your header smaller... at this point i can't really give you any more direct advice. If you don't know how to design the site for your average visitor resolution then you need to follow some tutorials first to get a feel on how this should be done.

@jessiewauthorMay 06.2010 — #The reason for the website is to help charities make some money from people who can not donate to them as they are on a budget.The banners are for ads that the charities will get also.I do not want to profit just enough to pay hosting.Do you know a way to put ads on the search results.thanks

@Jarrod1937May 06.2010 — #The reason for the website is to help charities make some money from people who can not donate to them as they are on a budget.The banners are for ads that the charities will get also.I do not want to profit just enough to pay hosting.Do you know a way to put ads on the search results.thanks[/QUOTE]
Sorry, i had edited my reply after you posted this. If you reread my reply i suggest running the idea through each search engine you use. Most if not all sites have a segment in their user agreement and terms of service that prevent a 3rd party from directly or indirectly profiting from their service.

However, even if you do get a clearance from each one to continue you'll need to run some analytics and find the most used minimum resolution and define your iframe size and banner setup to work with it. Since the site is new, until you get analytic data, 1024x768 is a good starting minimum resolution to design for.

However, you still should allow scrollbars if the person doesn't meet the minimum, so that they can still use the site.

@jessiewauthorMay 06.2010 — #I will not make money from them just my ads on my site.Just having trouble figuring out where to put the banner ads

@Jarrod1937May 06.2010 — #I will not make money from them just my ads on my site.Just having trouble figuring out where to put the banner ads[/QUOTE]
Using ads is indirectly profiting from the service the search engines provide. In other words, your visitors are using the search engines service, yet you will be profiting from the ads placed on your site. Which is something almost all of them probably restrict.

I'm not saying the idea should be scraped, but you should run it through the proper channels to do it legally. Which if you're doing this for charity organizations, you will have to.

@jessiewauthorMay 06.2010 — #So will you help me though please

@Jarrod1937May 06.2010 — #The placement of the banner previously, where it was on its side worked fine, though it is technically a more difficult design to work with. The easiest placement to deal with would be on the top, as you won't have to worry about vertical resolution, at least for the ad, as much. But that also would cause the top to get quite cluttered, causing a need to redesign the nav in my opinion. Its a tradeoff. But the tricky part is what resolution to design it for. Currently you site does not handle varying resolutions. The iframe is fixed and a portion is cutoff on my current monitor (a 720p projector, so its an odd resolution), but since you've removed the scrollbars i cannot as a user attempt to scroll down. The main issue you have is that iframes were not designed to be windows to an entirely different and fully designed site, so it is going to be difficult to get the entire thing to fit together well.

I could be wrong, but i think you're lacking some knowledge on designing and resolution. Checkout this quick, though slightly outdated, tutorial:

http://www.echoecho.com/designscreens.htm

Which basically breaks down how resolution affects your design, and hopefully with that you can see why its important to either give the user scrollbars or to design the site for the proper resolution.

@jessiewauthorMay 06.2010 — #So where would you put ads at then if it were your site.You can not see the bottom of the page.Wow.So how could i get the resolution fixed is that something i would need to get someone to write for me.thanks

@Jarrod1937May 06.2010 — #So where would you put ads at then if it were your site.You can not see the bottom of the page.Wow.So how could i get the resolution fixed is that something i would need to get someone to write for me.thanks[/QUOTE]
If you're not a web developer or a designer, then yeah, you'll need to get someone to fix up the site for you. I would personally put the banner on the right side. A banner on the top would push the iframe and other content below the fold for your most common resolution as well as seem more bulky and ad driven. If you can, the best approach would be to have the ad have a width of your choosing and a height designed for your most common resolution, then have the iframe scale based on the resolution of the user. This will get tricky as not all sites will scale without additional scollbars within the iframe, which would cause nested scrollbars, a big design no no. Though google scales to resolution very well at least.

@jessiewauthorMay 06.2010 — #Would you do it for me for $10 and a copy of the script please and thanks

@Jarrod1937May 06.2010 — #Would you do it for me for $10 and a copy of the script please and thanks[/QUOTE]
Normally i'd love to, but i am too busy at the moment. There are a lot of freelance webdesigners out there so i'm sure you'll have no trouble finding someone else. You can probably search google and find some freelance sites, i think stackoverflow added a freelance section come to think of it. Either that or look for someone here, but i don't think this site has a freelance section.

Also in #PHP _↴

Passing Variables back up the chain.Secure Login with PHP problem with the text format

Success!

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

Tweet This

Different sizr site in different browsers

24 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

Different sizr site in different browsers

24 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #PHP _↴