16 replies [Last post]
jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

Everything seems fine with my website in Safari and Firefox, but in IE it is all out of whack. Take a look and see what you think. Any suggestions would be greatly appreciated. I had to use a table to get it centered and would like advice in that area to stay away from tables if at all possible.

The web address is: http://jeradhillphotography.com

The url to the css is: http://jeradhillphotography.com/css/default.css

As of right now it is a one page website. I plan to use the same layout on different pages some with the slideshow and others with text and images in the center box.

Thanks so much!

Jerad

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Centering - Use margin: 0

Centering - Use margin: 0 auto; in your CSS. This sets the top and bottom margin to 0 ( you can, of course choose a px value if you'd like ) and the left and right to auto. Setting left and right to auto allows you to center things in CSS.

Please have a look at my post on conditional styles here: http://csscreator.com/node/28011 - it is probably your easiest bet to get IE to display right. Post back here if you are confused about the usage of these types of styles.

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

I am a bit confused. I used

I am a bit confused. I used Margin: 0 auto often and it did exactly that. Except with my website the background image auto adjusts to the screen as you drag your window out or shrink it down. This caused an issue when trying to use Margin 0 auto to align the slideshow and it's elements in the middle. If I try to use margin 0 auto on that then it does nothing but put it in the top left corner. Please take a look at the code I have written and let me know what you think. I do not use Dream Weaver. I wrote it all by hand.

Thanks

Jerad

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Eh sorry, I hadn't looked at

Eh sorry, I hadn't looked at your code. I assumed since you were complaining about having to use tables to center the stuff, that you didn't know how to center with CSS.

I will go have a look now for you.

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

Thanks, I appreciate it.

Thanks, I appreciate it.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Sorry, kind of got wrapped

Sorry, kind of got wrapped up elsewhere.

Just want to point out that, after pausing your music, about a minute later it comes back on without me pressing play.

As far as your IE problems go, if you follow my link to conditional styles, you'll be able to customize the page for IE without affecting other browsers. In IE 6, you get that blueish color because you've used PNG files. IE 6 won't interpret PNG transparencies correctly. If you go to http://www.teamerenity.com/IYTYGIB%20Final/js/ you can grab the JS files that are necessary to make PNGs display correctly - you'll need to link them in via conditional styles for all IE's less than 7 - to see that done, go to http://www.teamserenity.com/IYTYGIB%20Final/ and view the source.

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

Ok sounds good! Thanks One

Ok sounds good! Thanks

One other thing. Does my layout appear correctly to you? Besides the PNGs not loading correctly. You should not have to scroll at all to see the slideshow. It should position itself right in the middle.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Looks great in Firefox and

Looks great in Firefox and Opera. Unfortunately something in the way IE interprets your code is pushing it severely to the right, but as I said, restyle the page for IE 6/7 with conditionals and then try to make the slideshow go left by fiddling with your margins in those sheets.

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

I did the IE fix, I used a

I did the IE fix, I used a JS and called it to the page so that should be working.

As far as margins, everything that I change messes things up in Safari and Firefox but still wont help in IE. I just cant seem to figure out what I am doing wrong. it has to be something simple.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

So, did you use the

So, did you use the conditional CSS for IE and define margin-left: -500px; on #slideshow? Just to test, that would be a good place to start.

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

I did use the conditional

I did use the conditional css and I will try a -500px margin. I hate to write code like that it's just so unnatural. Oh well, Curse you IE!

Thanks. I will update you when I get it to work.

Did you also notice that the borders to the slideshow did not line up correctly in IE? That could be another issue that is harder to fix.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Yes, I did notice the

Yes, I did notice the bordering issue. I wanted to see the slideshow as a whole in IE before making a judgment call on that though. TO be perfectly honest, I haven't looked at your code once. I will look in just a little while to check if there's something we can do so the conditional style is not so "unnatural."

Did the negative margin shift the slideshow over at all? I do not see it online, but did you just not upload it yet?

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

I must be completely

I must be completely retarded. I have another issue on another site Im developing.

http://brollico.com

Css is located at: http://brollico.com/css/default.css

The flash slideshow shows up in IE very tiny yet in all other browsers shows up just fine. I have not had this problem before. Gosh I feel so lame. Is IE messing with me? I have been developing for 5 years full time and never ran into so many issues I could not figure out. Oh well it happens to the best of us.

Could you look at that site as well.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Haha, don't let yourself

Haha, don't let yourself down so hard, we all have problems seeing solutions to our own code sometimes.

Honestly though, I've never done anything with flash movies, but my best guess is that IE does not expand the header box from the way you have it styled.

#header {

width: 760px;

height: 90px;

margin: 0 auto;

}

If my thinking is correct, it will try to keep it at 90px, and scale the width accordingly. Firefox, on the other hand, by my guess, would be resizing to box based on the parameters of the flash movie ( 760 x 320 ).

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

The slideshows are located

The slideshows are located in Header 2 and on the portfolio page Headerport
#header2 {
width: 760px;
height: 320px;
margin: 0 auto;
}

#headerport {
width: 760px;
height: 500px;
margin: 0 auto;
}

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

I figured out Brollico. I

I figured out Brollico. I had the ID in the flash params set to the same name as a div style which was making it tiny. Got it fixed. Now I have to apply it to the rest of the pages.

jeradhillphotography.com is still a mystery.

jeradhill
jeradhill's picture
Offline
newbie
Modesto, CA
Last seen: 15 years 22 hours ago
Modesto, CA
Timezone: GMT-8
Joined: 2008-01-30
Posts: 10
Points: 0

My same ridiculous downfall

My same ridiculous downfall caused the image border alignment issues. I am still working out the issues with it aligning way left.

ATTENTION:

If you have flash embedded in your website, don't name the file the same as any of your divs of you will be in trouble.