[jesusfreak101]

i have a website im creating and i have a problem on one of the pages. i add a padding to the right side of the image so the text wont be close to the image. it works good in firefox, but in IE it sucks! IE always has to mess it up...heres a a link to see the code:

John T. Droesch, MD : Contact Us

and its the image of the map...let me know of any solutions

p.s. - to all css developers I KNOW its tables, im working on the css thing...im learning

[herkalees]

I haven't looked at the code (I have to run a virtual-machine to use IE6, and I'm lazy), but you should be adding margin to the right side of your image if you want to push something away from it, not padding.

[jesusfreak101]

also if you go on the about page, that image has no padding or margin and still shows like it has some ????

[herkalees]

Originally Posted by jesusfreak101

also if you go on the about page, that image has no padding or margin and still shows like it has some ????

That's because the image, itself, has whitespace in it (on the right and bottom sides).

[jesusfreak101]

oh i thought i had already uploaded the new pic, srry

[josse]

Also you should always include this CSS

* { margin: 0; padding: 0; }

Margin and padding are slightly different in each browser.

I do recommend to study some CSS. It's not that hard!

Here is a good start!

w3schools.com/css

[pgo]

Originally Posted by josse

Also you should always include this CSS

* { margin: 0; padding: 0; }

Margin and padding are slightly different in each browser.

While you're almost right, that can cause some headaches (particularly with forms). Better to use a CSS reset like the one Yahoo! puts out.

[herkalees]

Originally Posted by josse

Also you should always include this CSS

* { margin: 0; padding: 0; }

Margin and padding are slightly different in each browser.

I do recommend to study some CSS. It's not that hard!

Here is a good start!

w3schools.com/css

That does some silly stuff to form inputs on Firefox. As pgo already mentioned, Google 'round for 'CSS reset'.

[jesusfreak101]

Originally Posted by josse

Also you should always include this CSS

* { margin: 0; padding: 0; }

Margin and padding are slightly different in each browser.

I do recommend to study some CSS. It's not that hard!

Here is a good start!

w3schools.com/css

i know css, i just need to learn more on positioning and setting it to look like i want it. relatively tables are really easy for me cause i slice them in photoshop then just import to dreamweaver but yes i am learning it. i might get that CSS for dummies

[datahound]

ook!

[jesusfreak101]

also, how do you guys like the design?

[josse]

Originally Posted by herkalees

That does some silly stuff to form inputs on Firefox. As pgo already mentioned, Google 'round for 'CSS reset'.

I certainly agree, but if you don't use any forms it's a quick and dirty way to get it right...

[josse]

Originally Posted by jesusfreak101

also, how do you guys like the design?

I had a very quick look at it...

The design looks ok to me... I think it represents the subject. I do have the feeling it misses a bit content and more pics?

On web usability a few quick remarks though...

Droesch/practice.html

- Gives me (Firefox on mac) a scrollbar on the right which is very confusing for users. So try to get rid off it

You should always give another color to a visited link so the users know they already visited it... and give the amount of mb between brackets of a downloadable pdf (e.g. PDF - 5MB).
You even should always underline a link, but that can be very ugly and devistating to a design, so underlining on rollover is just fine (like you did)

I also think you should add a sitemap... it gives a nice overview of your site when people are stuck or don't find what they are looking and search engine spiders love it!

Hope this can help you a bit....

cheers
J

[pgo]

The design's alright enough, I guess. Problems that jump out at me:

• The height is limited (on "Practice Emphasis") so you force internal scroll bars - that's a really bad usability practice. Font resizing works on most other pages.
• The navigation buttons have that maroon strip above them even when they change (and how the active/hover state has a little blue chip out of the bottom right corner).
• Most of the headings are text-as-images.
• The dark border around the whole thing (matter of taste).
• The logo/banner and the nav buttons have centered text (matter of taste).

Overall, it looks too much like it's designed for print or another static medium. Like a website trying to be a brochure.

Originally Posted by jesusfreak101

i know css

That's obviously not true.

Originally Posted by josse

I certainly agree, but if you don't use any forms it's a quick and dirty way to get it right...

Is it really any more complicated than importing the Yahoo! Reset CSS at the beginning of your main stylesheet?

@import 'http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css';

[iamAdam]

Simply take out the padding-right for the image, and place the text in a paragraph. eg: <p class="text"></p>
Then in your css, p.text { padding-left: 10px; }

This should fix your problem.

[josse]

Overall, it looks too much like it's designed for print or another static medium. Like a website trying to be a brochure.

That's not always a bad thing in my opinion, depends a bit on your audience

Is it really any more complicated than importing the Yahoo! Reset CSS at the beginning of your main stylesheet?

No, it's less complicated... I think using the star selector is more straightforward for a beginner in CSS then using @import, but I could be wrong.


I also think that this topic is covered now...

[ptron]

its one of the biggest problems for web developers tryin to get css layouts to work right in all browsers.

i have found ie7 and firefox synche up lately. ie6 and firefox can be a nightmare
but depending on what you doin firefox has caused me all sorts of problems particualry with the elusive sticky footer issue.

try checkin out css sites and learnig what they do.
css Zen Garden: The Beauty in CSS Design is a good one