[SOLVED] SIte looks fine in FF, Safari...Problems IE

Scotalia

Hi all,

I'm relatively new to web design - know enough to make mistakes I can't fix. As I know nobody personally who knows anything about web design, I find my mistakes to be very frustrating because I don't know enough to know what I did wrong. So, I appreciate ANY help/advice I receive here.

I'm not even sure where to begin. I had started to design a page with header, left fixed-width column, right liquid content, footer. Created all the graphics I needed to make "pretty" rounded corners on many of my elements. Seemed easy enough. I had to trash the "liquid content" design as my layout would fall apart even in Firefox if I didn't set a Min-width (which I learned the hard way isn't supported by IE6). So I went back to the CSS-drawing board and created a centered fixed-width layout with left column for navigation. Firefox and Safari play nice. Validated (x)html and css at w3c. Everything seemed good. Opened page in IE, and wanted to cry.

Here's a link to my page:

http://www.queencitycgfox.com/new_mcs/newmcs.html

It's just a mock-up - no live links, no real text, just wanted to see if I had things right.

My questions are why IE adds padding (?) at the bottom of my light orange content boxes and thereby breaks my rounded corner effect? Also, my orange menu box's links should not be underlined unless hovered on. Plus, there Link #4 should be gray to show it is the "current" page. Text in general is also overly large from what I'm seeing on my Mac.

I don't know how better to articulate my questions except to say "Why doesn't IE render my page like Firefox? Where did I make my mistakes and how do I avoid them in the future?" I have a total of 3 sites to re-design/keep updated. I think I bit off more than I can chew, but actually seem to enjoy the agony this this puts me through...it's better than most jobs I've had.

Any help would be wonderful...I've tried books and online tutorials (not this site though as I just found today - but I plan to), but unless I'm creating THOSE specific elements/sites my questions aren't answered by these resources. Hopefully someone can shed some light. Sorry for the long-winded query...I'll stop now.

imagn

I looked at on IE7 but didn't see what you were referring to... Were you looking in IE6?

__________________
Imagn Design: Los Angeles Web Design Firm

danny322

Scotalia, the more web design you do and more experience you get, you'll realise that browser issues are a constant pain in the arse. IE does not render your page like firefox because the 2 browsers have different default stylesheets, one way of avoiding some problems this causes is to reset all margins and padding. Put this in your css.....

*{
margin: 0;
padding: 0;
}

I unfortunately dont have IE6 on this machine so i cant see your problem at the moment. Btw, use Lorem Ipsum for your dummy text.

Danny322

aso186

Just adding to ^ post, make sure that slice of code is at the beginning of your CSS (i.e at the top of the page). Otherwise, it will override any margins or padding you set for elements 'earlier' on.

__________________

Scotalia

Thanks for your help danny. I did as you suggested, but now my "beautiful" rounded corners are gone in both FF & IE. And yes, imagn, I am looking at the site problems in IE6 (sorry for not specifying).

Danny, any advice on what needs to be done now to get the rounded corners back in place or even better why they disappeared in the first place? I'm going to go re-look at my css to make sure my margin & padding are set properly for all my "other" elements but I have posted the updated version with danny's "*" rule for your viewing.

Thanks again for any help.

PS danny, is there a way in Adobe GoLive to insert Lorem Ipsum as dummy text? I haven't found it if there is, and find it easier to just type out a quick couple paragraphs than to download X parags of text each time I need some dummy text. Any sugestions?

aso186

What's happened is the code snippet has reset the styles that your rounded corners script used. You'll need to override this by specifying their padding and margins.

Did you ensure the code danny gave was at the beginning of your CSS. It's quite important that it is.

__________________

dab42pat

Hi there

It seems like dreamweaver (im assuming your using dreamweaver) has updated your links to your your images in your CSS.

Pat

__________________
DAP Web Design Sensuallady(my wifes site)

danny322

About the Lorem Ipsum....if u go to the address i gave u and scroll down you can select the number of paragraphs/words etc for it to generate for you, then copy and paste it into your html.

Were your rounded corners in a seperate div tag and a seperate image?

Scotalia

Hi guys/girls.

Thanks for the hlep/comments.

ASO: I did put the "*" code at the beginning of my css file, but placed a comment just before it. This wouldn't cause a problem would it? Also, as the snippet is at the beginning of my css file, shouldn't all the declarations that worked before I added it still work as the padding and margin and the rounded corners were all declared "properly" (so I thought) as to show correctly in FF. So why did this new snippet reset everything that's already been specified below it - isn't this where the "cascade" in css takes place? Am I missing something fundamental here?

DAB: I am actually using Adobe Golive, but in my opinion same thing - it's just the one I got used to first. And I know Adobe stopped udating/selling it but the CS2 version I have allows me to hand code, streamline repetitive tasks, and manage/upload sites efficiently. It works.

As for GoLive updating my links, I specified it to not do so, but I'll check that out...that might solve everything.

Danny: Re: Lorem Ipsum - I'll give that a try, but it feels like it take me longer to go to that web link, than just type up a quick paragraph and copy/paste it. Is there any design reason that makes the Lorem Ipsum handy or do you just find it convenient?

Re: Rounded Corners - They were separate images used as either backgrounds or actual img tags in various elements (ie. div, p, h2). What were you thinking might have caused the disappearance. As stated above, I am going to see if GoLive updated/changed my CSS file or to break the links to these images.

I'll post my findings and the updated page (if necessary) shortly.

Thanks again,

Craig

Scotalia

Just an update: Looked through my CSS and HTLM to determine if there were any "changes" made by GoLive...Everything looks how I think it should. Although what I think has gotten me into the mess I'm in.

I re-uploaded the page in case I screwed that up the last time around, but everything still looks the same as before (ie. no rounded corners). However, when I preview in GoLive using FF, Opera, Safari, and IE Mac, the site looks perfect. But when I upload live its missing the rounded corners in ALL my browsers and IE6 (not sure of IE7 as I don't have access to it). Any idea why it would show correctly when I preview but not when on the server? Did I upload incorrectly somehow?

Thanks for comments. I really appreciate your help.

Craig

dab42pat

Are you sure all your image links in your css should be this.

HTML: Select all

url(../../../../mcs_new_layout/web-content/graphics/rnd_wrapper_right.gif)

Pat

__________________
DAP Web Design Sensuallady(my wifes site)

Scotalia

Dab: Yeah I noticed and fixed that AFTER I posted my last comment...they should NOT have looked like that.

I re-uploaded my page and now it's the same as it was originally - wierd bars and misplaced rounded corners on the "inner"/light-orange (or biege) content boxes. It seems like this might be extra padding, so I'm going to play with this idea but if any of you have a different thought, please share.

Thanks,

Craig

danny322

Lorem Ipsum is meant to distract attention away from the text and foucus on presentation. It also give a better idea of what your shite will look like with proper text instead of CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE

have a read about it here scotalia....

http://en.wikipedia.org/wiki/Lorem_ipsum

danny322

Ah i see u got your rounded boxes back. What did u do?

Scotalia

danny: When I added the "*" rule and uploaded the updated css to the server, I inadvertantly allowed GoLive to "change" my img links, this broke the links. As Dab suggested I had to fix these links. Once fixrd the Rounded corners came back, but as mentioned above I am still stuck with some sort of "bar" at the bottom of each light orange content box in IE6. This was my original problem. I thought it might be extra padding, but by "tweaking" the boxes' padding, I still can't get it to look right. Any suggestions as to why these "bars" of light orange are there and how to get rid of them?

Thanks,

Craig

danny322

I aint too sure how you've put together the rounded orange boxes, the way i do these is to have 3 seperate div classes (top, middle and bottom). Ive quickly made some images to show you below but dont use them as the sizes r probably wrong lol.

Example:

Top


Middle


Bottom


So with this you would do something like.....
HTML

Code: Select all

<div class="top"></div>
<div class="middle">CONTENT HERE</div>
<div class="bottom"></div>

CSS

Code: Select all

.top{
width: 576px;
height: 35px;
background-repeat: no-repeat;
background-image: url of image goes here;
}

.middle{
width: 576px;
background-repeat: repeat-y;
background-image: url of image goes here;
}

.bottom{
 width: 576px;
height: 35px;
 background-repeat: no-repeat;
 background-image: url of image goes here;
 }

Remember not to set a height on your 'middle' div, that way the image will repeat itself automatically as you add text.

Does this make sense?

Danny322

Scotalia

danny,

I did something similiar, but used four corner images attached to four elements/divs. I did this per Pro CSS Techniques by Apress. It's supposed to allow for scaleable boxes - both up/down & left/right. I originally did this to allow myself a fully liquid content area in my layout. I have since decided this is an impossible feat for me and will prob eventually use a top & bottom image like you suggested.

In the meantime, I at least seem to have narrowed the problem down to a padding/margin issue. It seems that my .content class padding/margin does not allow me to specify a value without adding a "block" of color that is my current problem. I can't seem to change this no matter what padding/margin I use or what bg color I use in the div I set the margin/padding to. I feel like I am close to fixing this, but am still beating my head against some invisible wall that I can't seem to get through.

Can anybody take a look at my css code and help me out before I change my img's to top and bottom as stated by danny above.

Thanks,

Craig

Scotalia

Uploaded my most recent "tweaking". I do not have access to IE6 at the moment, but all looks good in ...

If anyone has access to IE6 and can compare to FF 2.0.0.12 and let me know if there are any "problems" or noticeable differences, that would be a great help. Going to sleep now as I have long forgotten what changes I've actually made to hopefully "fix" the site in IE6.

This leads me to another question: When you guys are tweaking a site to fix/solve a problem, how do you keep track of changes you make in your code? I found myself trying to make a single change at a time so I could revert back to the original css/(x)html but in the end just made copies of each file and "went at it" until things looked right to me in FF. HOWEVER, how am I supposed to keep track of EXACTLY what may have solved my problem for next time? Or is it more of so much trial and error that eventually good ideas and best practices and 'fixes' just stick with you - kind of like those "A-HA!" moments... Just curious.

Thanks guys for any feedback. Hope I don't wake up to grave disappointment from IE...well I'll at least dream about a nice looking site even if I don't wake up to one...