Website Launched

bhambruiser · February 8, 2006

Hello all,

I recently launched a website for some people I go to church with. They are going through an ugly custody battle with their daughter.

The ex-husband had been abusive towards the mother and daughter, and had even sexually molested the daughter (all which he admitted to) yet the judge on the case awarded custody to the FATHER! insane and just plain wrong. the general consensus is he did so to protect his interest in a bank where the defendant worked. You can read the details on the site.

but here is the address: http://www.save-her.com

any feedback is appriciated. obviously i had to take out a lot of names (for legal reasons) and the WHOLE story is not up there, to protect the innocent so-to-speak...but hopefully it will work towards getting this corrupt judge thrown off the case and the daughter back to her mother...

there are some kinks i still want to work out with the way it displays in firefox at a high screen resolution, but other than that- i had it pretty much working in any browser. anyway. thanks guys

fiasco! · February 8, 2006

perfect look for the content of the site. great to see designers working for their heart as well as their wallet.

bhambruiser · February 8, 2006

thanks, i appriciate it...

all i have to do now if fix the firefox issues and throw my favicon on there.

let me know if anybody has any problems viewing the site....and while you're at it- if you are so inclined- throw a prayer up for this family

pollux · February 8, 2006

The interface looks really good. Soft yet appealing. Great job!

In Firefox, there seems to be a small problem with the hover on the menu items: the background looks to be going further left than what it was originally meant to. Is that the problem you wanted to fix?

As joel said, it is a perfect look for the content of the site.

bhambruiser · February 8, 2006

In Firefox, there seems to be a small problem with the hover on the menu items: the background looks to be going further left than what it was originally meant to. Is that the problem you wanted to fix?

bingo! that's the one....anyone know of any fixes....i tried adding a margin-left:1px to the html rule and when i use the web developer extension in firefox to edit css- it fixes it, but i can't change the actual css until i get to the house...i am still unsure what it is gonna do to IE...gulp...

i am also having a slight problem with the background image when you shrink the size of the browser window- chances are no one will shrink the window to such a width, but it bothers me that it breaks the design.

anyway- thanks for the comments and any pointers/suggestions would be appriciated

pollux · February 8, 2006

In Firefox, there seems to be a small problem with the hover on the menu items: the background looks to be going further left than what it was originally meant to. Is that the problem you wanted to fix?
bingo! that's the one....anyone know of any fixes....i tried adding a margin-left:1px to the html rule and when i use the web developer extension in firefox to edit css- it fixes it, but i can't change the actual css until i get to the house...i am still unsure what it is gonna do to IE...gulp...
i am also having a slight problem with the background image when you shrink the size of the browser window- chances are no one will shrink the window to such a width, but it bothers me that it breaks the design.
anyway- thanks for the comments and any pointers/suggestions would be appriciated

I've had the same problem earlier when developing a small website. I think that the main problem you're facing is playing with widths... Try not setting any width on the link itself in your CSS, this should do the trick.

I created a small test page to show you what I mean. It works both in IE and Firefox. I put a grey/white background to help you visualize the background color change.

Test for bham

Look at the code behind it, I used inline CSS so you could look at it as a whole.

Let me know if this helps!

bhambruiser · February 8, 2006

the weird thing is- the only width I have is applied to the main navigation (which is needed- otherwise the content will spill over into the nav section)...

if you are in firefox- and you shrink the window down (to ridiculous proportions) you will see what I am fighting with. the grey of the bg image starts sliding out of the frame..

thanks for your help!

pollux · February 8, 2006

the weird thing is- the only width I have is applied to the main navigation (which is needed- otherwise the content will spill over into the nav section)...
if you are in firefox- and you shrink the window down (to ridiculous proportions) you will see what I am fighting with. the grey of the bg image starts sliding out of the frame..
thanks for your help!

I see what you mean... I think that in order to fix that, you need to set a width for the external container.

I don't have too much time on my hands right now, but after checking what I have done for the site I did, the background of the menu doesn't move... See for yourself:

LHSMM

(content is in french, but the frame isn't )

You can check the code and the CSS behind it, it should give you a hint. I'll try to see how to fix your problem tonight, when I get home.

bhambruiser · February 8, 2006

cool yeah thanks

actually the weirdness stopped when i took out the little toolbar fix in firefox. but now i have a 1 px problem on my hands.

i too am gonna mess with it more when i get home...

thanks for all the help

bhambruiser · February 9, 2006

I hate double-posting but here it goes:

I think I have found the origin of my problem...maybe

apparently it isn't new or unique to me:

1 Px Rounding Error

But it still doesn't give any fixes or workarounds for it- so i don't know if i am screwed or what...anyway....thought i'd share-

at this point I will take any suggestions.

thanks

pollux · February 9, 2006

Alright, I finally had time to break this down, and I think I can help you correct your errors (at least I hope!).

As you found out, there can be a 1px rounding error in Firefox or Opera. This is caused by using relative widths and heights rather than fixed one. While a design without any images would normally work well with this, having images can mess up everything. And this is part of your problem because you're placing your background images with a percentage. For example, your background image for "container" is placed with a 50% in terms of width. This image contains your grey background, so whenever you resize your window, it places the image in the middle of the view, therefore the grey seems to disappear from under your menu.

There are several ways to correct this problem. Here's a quick fix that should do the trick (and what I usually do when I want a centered page):

1- Create a "mega-container" frame, which has a defined width (should be the total width of your background image) in pixels, auto margins (to center), and the background image (doesn't matter if it is centered or not, it will be displayed as a whole) repeated in y.

2- Create a "sub-container" with margin-left corresponding to the length of your image's left border (from the purple to the black), same with margin-right, both of these in pixels. This container will allow you to have all the text at the right place.

3- Go wild with what you already had! By then, when resizing, the background image should not move without the content, thus creating the illusion that they are in fact stuck together.

Here's a quick code example of what I was thinking... You can copy, paste in a new html document and resize it as you wish. It shouldn't have the 1px problem. Well I didn't see it in Firefox nor IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body style="margin-top: 0px; background: #E4D6E0;">

<div style="margin: 0 auto; width: 710px; background: url(http://www.save-her.com/images/bg.jpg)">
	<div style="background: #EFEFEF; margin-left: 30px; margin-right: 29px;">
  This is the total writing area...
	</div>
	<div style="margin-left: 30px; margin-right: 29px;">
  This is to show you with your grey background as the menu bar... Everything can be resized, nothing will change!
	</div>
</div>

</body>
</html>

Let me know if this works or not... I'll see what I can do if this doesn't solve the problem!

bhambruiser · February 9, 2006

i'll have to mess around with that- thanks so much man

i found a way around the pixel rounding thing- if you have all of your images and the container div that the images are in listed as an even number it takes away the rounding issue.

i messed with that and it seems fix my issues...i will try to do the background fix a little later to see what it does. I appriciate it.

Sign In

Website Launched

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information