3 replies [Last post]
Sam0000
Offline
newbie
London
Last seen: 11 years 13 weeks ago
London
Timezone: GMT+1
Joined: 2008-09-13
Posts: 1
Points: 0

Hello,

I have nearly finished this site off just waiting on text. I have spoted the following problems so far.

Layout problems
1. png files show up with no transparacy in IE!?
2. main three columns on the home page move around in IE5 IE6!?
3. Firefox3 mac - the blue bar at the bottom jumps over text.

All opinions welcome - http://monicarojas-dentistry.com/monica_site2/index.html

Thanks

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 31 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

My comments won't be fully

My comments won't be fully fair cause I only took a very, very quick look.

You have a full, functional, proper doctype, so I don't see the need for a separate stylesheet for IE6 or7. IE5.x and below will always show a properly written page rather goofy because it doesn't use the correct box model (IE6 and 7 do). If anyone needs a separate stylesheet, it's IE5.x and below, not 6 or 7. However, that takes some knowledge and currently if I turn on VirtualBox to get Windows going to look in IE6, my Amarok player will quit on me, and I'm enjoying some music : )

FF3 on Ubuntu doesn't seem to have any issues with the footer/blue bar, so possibly it's a Mac font thing? In which case, you might be able to make some small adjustment in box or font sizes or bottom padding on the elements above to fix that?

PNGS-- normal PNGs are fine in all browsers, but png's with alpha transparency are a no-go for IE6 and below. What you do is:

evaluate if you really need the transparency, and if a gif won't do the same thing (you can almost always fake a file with a gif if there are no moving backgrounds anywhere (such as when the browser window size shrinks and grows)) because, say, gif doesn't give you enough colours, send the png to everyone, then send a transparent gif version to IE6:
#element {
background: url(awesometransparency.png) 0 0 no-repeat;
}
* html #element {
background: url(crappytrans.gif) 0 0 no-repeat;
}

The latter is a hack (one that is considered "safe" and will validate in CSS) for sending things to IE6 and below. You can use it to merge your three stylesheets into one. Be aware that if you care strongly about IE5x, then you need to do a bit of crappy hacking-- * html is IE6 as well as below. Ie6 will deal with the * html in a good box model way and IE5.x won't.

That's why you see sometimes
#element {
width: 250px;
padding: 10px;
}
* html {
width: 260px;
w\idth: 250px;
}
or some such thing. The * html width sends to IE6 and below, which is needed for IE5.x and below, and then the amended width comes right after for IE6 (who has no problem with the \ in the middle of the word while IE5.x does)

Lastly, if you're desperate to have semi-transparent PNGs, you could use one of the javascripts called PNGfix, of which there are at least three versions I've seen floating around. I've heard people trying to use it with links... and they aren't clickable anymore, so test that if you choose PNGfix with clickies.

Last note, that MM_swap garbage (say that word in the French style, gar-baaaszj, so it doesn't sound so bad : ) has no place in a modern web page. 1998, sure : ) Currently, CSS does that swapping job better and faster than Javascript, and works on more machines (as Javascript isn't as widely enabled and available as CSS). However, doing that is another topic and if you are interested in tackling CSS image swapping (or better, using the same image containing both states and sliding it around behind the element-- less image loading), take a look at
Sliding Doors of CSS (two pages)
Image "Sprites"
Putting the two together

Three examples I've made myself:
http://stommepoes.nl/Menus/spritesmenu.html Images and design not by me
http://stommepoes.nl/Menus/maphover.html Using the same thing for a map, a bit more complicated
http://stommepoes.nl/Kyle/practice.html hover over the menu... design by Kyle except the text of the menu (I chose a gay-looking menu specifically because this is used when you need a funky font to show on the user's screen that they're unlikely to have)

Design looks nice and clean, like I want my teeth to be : ) Although a single jpg image somewhere on the page could liven it up with a touch of colour. Something like an underline between your Fees list would help readability, not that readability is bad there.

Other notes:
Images which are sitting in the HTML like Treatments should have their width and height in the HTML stated. This is because apparently even having the heights and widths in the CSS is not enough to prevent the browser from doing a "double pass" through the page-- once for the stuff it knows about, and again when it's fully loaded all the images and knows for sure their dimensions. You may have heard about not having presentational markup in the HTML. Height and width of images and objects doesn't count as presentational.
Treatments

This:

<p> <br />
HYGIENE / PROFESSIONAL CLEANING <br />
Most of us build up some plaque and stain on our teeth, it all depends on our diet, oral hygiene and life style. In some severe cases it can produce gum disease, which is now recognised as one of the most frequent reasons for tooth loss in adult patients. Even for patients with good oral hygiene and with no history of gum disease, it is recommended to have this done periodically.
First, all of the hard deposits of plaque are<br />
<br />
removed and then we finish with a polish. Oral hygiene instructions will be given to improve your daily regime and maintain your oral health.
FILLINGS
...etc

Should be more something like

<h2>HYGIENE / PROFESSIONAL CLEANING </h2>
<p>Most of us build up some plaque and stain on our teeth, it all depends on our diet, oral hygiene and life style. In some severe cases it can produce gum disease, which is now recognised as one of the most frequent reasons for tooth loss in adult patients. Even for patients with good oral hygiene and with no history of gum disease, it is recommended to have this done periodically.</p>
<p>First, all of the hard deposits of plaque are removed and then we finish with a polish. Oral hygiene instructions will be given to improve your daily regime and maintain your oral health.</p>
<h2>FILLINGS</h2>
...etc

I used h2 but whatever would be appropriate goes for headings, which is what those look like. Is the page really supposed to look disjointed like this: http://stommepoes.nl/dentistry.gif ?
and paragraphs to make the breaks you want (being blocks, they start new lines anyway, and margins can set them further apart.
p{
display:block;
etc...
is not needed. They start out as blocks.

Fees looks like it should be a list, really, as should your big menu at the top.

Some of your differences between IE and FF is from margins and padding. You can zero them all out at the beginning using a Universal Reset at the top of your CSS document. This works better than margin: 0, padding: 0 on the body element:
* {
margin: 0;
padding: 0;
}

Be aware that padding on form controls can cause issues in some browsers, so if you have forms you may want a more complicated reset for the padding (listing every HTML element you have except form controls). But it makes IE and FF and Saffy and Opera look a LOT more alike, ESPECIALLY lists!

I'm no expert, but I fake one on teh Internets

LaLindsey
LaLindsey's picture
Offline
Regular
NY
Last seen: 11 years 34 weeks ago
NY
Timezone: GMT-4
Joined: 2003-12-16
Posts: 14
Points: 0

1. IE6 and below do no

1. IE6 and below do no support PNG transparency. Instead of using a crappy gif, try using a method like supersleight or unitPNG. I love unitPNG.

2. I can't check in IE6 because this laptop has stupid Vista, but more than likely it's because you're using floats and IE loves to double the margins. I'd recommend throwing in a IE Conditional Styles and cutting your margins in half, which may resolve your problem.

3. Can't help Wink Don't have mac so I can't troubleshoot for you.

I think it's a very nice, clean and simple design. You're code isn't bad (although I do think there are too many divs).

I'd recommend changing your "visited" link color in your footer to something other than the normal purple. The purple on top of the blue background makes it barely visible.

----------------------------------
Lindsey

CSSgirl Designs

gregjenx
Offline
newbie
Washington, DC
Last seen: 11 years 21 weeks ago
Washington, DC
Joined: 2008-09-09
Posts: 8
Points: 0

Web Design

Not bad. All you need is a photo of some people with nice teeth to complete your Web design.