different view [Archive] - Dynamic Drive Forums

chechu

05-16-2008, 03:27 PM

Hey all,
It seems I have a problem with my css on http://www.cecicasariego.com
Depending on the screen resolution, some visitors see a red background area between the portrait and the content below. I suppose it has to do with the css (http://www.cecicasariego.com/site.css). Can anyone take a look, please ? Thanks.

Medyman

05-16-2008, 04:46 PM

I don't have time right now to troubleshoot your CSS. Will try to look at it for you later. But I just wanted to say that the issue has nothing to do with screen resolutions. It has to do with what browser you use.

IE6 seems to present the issue that you posted about. You might also want to look at the site in Firefox. I see a few issues there as well.

chechu

05-17-2008, 08:33 AM

Thanks, Medyman. I have no idea how to switch browsers, so I can't help myself with this issue. I hope you'll find the time soon to have a look again.

rangana

05-17-2008, 08:49 AM

These are common drawbacks of absolute positioning (improper use) ;)

I see different view on both FF and IE, could you grab a screenshot on your end on what is your expected layout :)

Medyman

05-17-2008, 02:40 PM

I see different view on both FF and IE, could you grab a screenshot on your end on what is your expected layout
IE7, Safari, and Opera seem to be working fine. I'm assuming that's the expected layout. Fx and IE6 are the troublemakers, so to speak.

I have no idea how to switch browsers, so I can't help myself with this issue. I hope you'll find the time soon to have a look again.
You don't need to switch browsers, per se. Just go to the Firefox website (http://www.mozilla.com/en-US/firefox/), download and install Firefox. You don't need to make it your default browser if you don't wish. But if you're creating websites, you should really have at least one modern browser to test in. Otherwise you're coding for quirks in IE and it'll break for most other browsers.

chechu

05-17-2008, 04:53 PM

Fx and IE6 are the troublemakers, so to speak
What are the differences ?

These are common drawbacks of absolute positioning (improper use)
What and where needs to be changed, please ?

Just go to the Firefox website, download and install Firefox
Company computer; can't download anything ...

rangana

05-20-2008, 01:41 AM

Has the issue been resolved already?.. :)

The page I see on both FF and IE are "awkwardly" different, that's why i'm confused and asking for a screenshot at chechu's end.

I'm on a 1024x768 XP.

chechu

05-20-2008, 07:59 AM

This is how I'd like it to be seen: screenshot (http://cecicasariego.com/screenshot.gif)
Thanks so much.

rangana

05-20-2008, 08:56 AM

Disabling the right-click hinders us to know the src of the images, especially when FF does'nt saves the page "completely" ;)

Could you please temporarily disabled your "no-right" click script.

chechu

05-20-2008, 09:02 AM

Done on this page:
http://www.cecicasariego.com/indexGB.html

rangana

05-20-2008, 09:29 AM

See if adding the higlighted in your site.css gives it a fair ground ;)

#body{
width:745px;
margin:0 auto;
padding:0 0 0 33px;
height:250px;
}

chechu

05-20-2008, 01:11 PM

I have made the requested changes.
Is the problem solved now ?

chechu

05-20-2008, 01:16 PM

height:250px;
The header image is 260px height. Should I change 250 into 260 ?

rangana

05-20-2008, 01:51 PM

I have made the requested changes.
Is the problem solved now ?

What you mean?..haven't you checked it by yourself?..I suppose it must have provide an aide :rolleyes:

The header image is 260px height. Should I change 250 into 260 ?

Doing so will create an annoing 10px gap (which is the extra 10px from 250px). I suppose you should not change the header image since it's not affecting your layout in any odd means ;)

Medyman

05-20-2008, 04:16 PM

IE6: 1788 Fx2: 1787

Specific points of error are the portraits/interior/crafts links and the copyright message in Fx2.
And in IE6, the inconsistency that I see is the gap underneath the girl's head.

chechu

05-20-2008, 06:31 PM

Originally Posted by chechu
I have made the requested changes.
Is the problem solved now ?

What you mean?..haven't you checked it by yourself?..I suppose it must have provide an aide

It didn't see changing anything on my computer, but my computer shows how I need it. And I cannot change browsers (company computer).

Specific points of error are the portraits/interior/crafts links and the copyright message in Fx2.
And in IE6, the inconsistency that I see is the gap underneath the girl's head.

This is the css for the three menu items:

#header ul.top-link{
width:100px;
height:300px;
position:absolute;
left:458px;
top:193px;
}
#header ul.top-link li.link{
float:right;
background-image:none;
border:none;
width:200px;
font-family:tahoma, arial;
font-size: 11px;
color:#565656;
text-align:right;
}
I suppose the red one causes the problem ?

And this is the code of the copyright:

<div style="padding-top:13px; padding-bottom:19px;">

and in the css:

#left{
width:268px;
float:left;
}

The gap in IE6 should be resolved with Rangana's suggestion, no ?
Should I use percentages instead of fixed numbers ?
These are the most used browsers on my site:
Internet Explorer 6.0: 57,45%
Internet Explorer 7.0: 22,96%
Mozilla 1.8: 10%

chechu

05-24-2008, 02:50 PM

I changed the css of the copyright link like this, adding margin-top 0px. Does that change anything in IE6, Firefox and Mozilla ?

#left ul.sub-link{
width:268px;
height:41px;
padding:3px 0 4px 0;
font-size:0;
float:left;
margin: 0;
}
#left ul.sub-link li{
display:block;
background:url(images/link_div.gif) right center no-repeat;
padding:0 14px 0 0;
float:left;
margin-top: 0px;
}
#left ul.sub-link li a{
display:block;
font:bold 10px/34px "Trebuchet MS", Arial, Helvetica, sans-serif;
background:url(images/left_link_bg.gif) 0 0 repeat-x #0E0E0E;
color:#E0E0E0;
text-decoration:none;
text-transform:uppercase;
float:left;
margin-top: 0px;
}
#left ul.sub-link li a:hover{
background:url(images/left_link_bg.gif) 0 0 repeat-x #0E0E0E;
color:#B08900;
margin-top: 0px;
}
#left ul.sub-link li.sec{
display:block;
background:url(images/link_div.gif) right top no-repeat;
padding:0 14px 0 15px;
float:left;
margin-top: 0px;
}
#left ul.sub-link li.noimg{
display:block;
background-image:none;
padding:0 14px 0 15px;
float:left;
margin-top: 0px;
}

chechu

05-24-2008, 06:59 PM

Someone told me the following:

When a div in IE is 10 pixels too high, use the following code:
*margin-top:10px;
This is only read by IE, not by Firefox
Is that correct ?

Also that my site contains lots of errors, which can cause this problem.
Looking at it (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cecicasariego.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0), I see errors that I do not find back in the coding, so I'm confused.
Can anyone recommend a doctype to use, please ?

sandyk3

05-26-2008, 12:17 AM

have no idea how to switch browsers
You don't have to switch browsers.. go to www.browsershots.org. You can test your pages in many different browsers.

Sandy K

chechu

05-26-2008, 07:04 AM

I checked it out, amazing, and indeed the same mistakes occur.
Please advise on how to make my site equal in all browsers.
-> These are my main worries:
Internet Explorer 6.0: 57,06%
Internet Explorer 7.0: 23,24%
Mozilla 1.8: 10,33%
-> This is how it should look like:
http://www.cecicasariego.com/screenshot.gif

chechu

05-26-2008, 02:01 PM

I am making progress:
I changed the background header, so the three links (portraits, interior and crafts) are now part of the background and no links anymore. Means that this problem is solved.
But how can I
- adjust the left menu
- remove space under the picture
- copyright in the black bar
(while you're at it, look at the graphical masterpiece on the index; it's amazing !)

sandyk3

05-26-2008, 04:59 PM

chechu - The big difference I see in your browsershots is the clack area containing copyright and english. In IE they are lining up just right but in every other browser they are bad. I was once told, and this made my life easier, to design for FF and the gecko browsers first and then made your adjustments for IE using iefix6.css or just iefix.css. You can point to different stlye sheets for IE in the head section of your html document. I've done it here: www.sandysdesignline.com/genesis/index.html. I styled everything for other browsers first and then worried about IE. It made life so much easier. I found out that big design companies do not worry about IE versions lower than 6 and they also don't worry about 8 as of yet. Others will disagree with me but the stats show that less than 2% are using a version of IE lower than 6. Sorry if this is repeating anything anyone has said in this post as I have not read every post. Also, if your page looks a bit different in other browsers but it is still effective - don't worry about it. The user isn't going to say, "hmm.. let me check how this site is showing in another browser and if it's not the same, i'm not doing business with him". It just won't happen. Here is the link for the browser stats:

http://www.w3schools.com/browsers/browsers_stats.asp

Sandy

What would happen if you styled your sub-link differently - meaning instead of [cod]background:url(images/link_div.gif) right center no-repeat;
[/code] what if you put the image at the bottom? The change will move the image down and that might make the difference for all browsers and then you can work on IE issues? Or you might want to play with the padding??

chechu

05-26-2008, 06:36 PM

to design for FF and the gecko browsers first and then made your adjustments for IE using iefix6.css or just iefix.css.
I totally understand you, but the problem I have is that I cannot download other browsers, as I am always on restricted company computers. What would I have to change, so that the copyright and language are good in Firefox ?
But I don't really worry about Firefox, more about IEM, because my visitors mainly use IE 6 (50%) and Mozilla 1.8 (10%), where both show the mistakes. IE7 (25%) doesnt' show them.

sandyk3

05-27-2008, 12:45 AM

I'm sorry it took me so long. I finally downloaded all of the images and I'm checking it out now. I'm not a pro so I can't promise you anything. Things like this intrigue me so I won't give up so easily.

san

sandyk3

05-27-2008, 01:04 AM

Okay.. I brought it into Dreamweaver and cleaned up the html with a command and it found 6 empty tags and cleaned it up. the copyright and english.. actually the entire block from true artist down to flemish.. moved down. now the top of your buttons is almost at the top of the black bar running across. i'm going to put it up at my site because i don't know yet how to do a screen print.. i'm on a mac but on the windows side... still learning.. i'll let you know when it's up

san

okay.. now i can screen print and i put it up real quick... still working on this

http://sandysdesignline.com/chechu.html

chechu

05-27-2008, 05:25 AM

Thanks a lot, San. I made a few changes yesterday regarding the copyright, but it doesn't seem to help. I think your suggestion to use this would be the best:

<link href="styles.css" rel="stylesheet" type="text/css" />



Problem I have is that I cannot work in different browser. Right now I'm most "worried" about IE6.

I changed this center into bottom, as suggested. Difference ?

background:url(images/link_div.gif) right center no-repeat;

chechu

05-27-2008, 07:24 PM

http://validator.aborla.net
Saw this in another thread, and it saved my life ! I checked all my pages, adapted them, and they look good. Now I'll see if they are equal in all browsers.
Nope. IE 6 is good on the copyright, but still shows the gap under the portrait, and the menu-items are lower.
How can that be solved, please ?

chechu

05-28-2008, 07:19 AM

I have a question about the following

<link href="styles.css" rel="stylesheet" type="text/css" />



Which one referres to what browser ?
And what is the difference between gt IE6 and li IE6 ?

In my case, I should just add the following, correct ?

<link href="style.css" rel="stylesheet" type="text/css" />
--> above referes to the current stylesheet

--> above referes to the IE6 stylesheet

rangana

05-28-2008, 07:29 AM

This means that when the browser is lesser than IE6, it takes this CSS.

When the browser is lesser than IE7 (IE6), it takes this css rule:



If it's greater than IE6 (IE7,IE8), it takes this css:



This CSS is used by browsers other than IE (FF,Opera,Safari...). Which does'nt understands conditional comments.

<link href="styles.css" rel="stylesheet" type="text/css" />

For further reading:
http://www.quirksmode.org/css/condcom.html

Hope that helps. :)

chechu

05-28-2008, 08:57 AM

Could you please have a look in IE6, and correct the following:
- this is the stylesheet part where the menu on the left is too low:

#headerEN h1{
display:block;
width:180px;
margin:0;
height:35px;
padding-top:20px;
padding-bottom:60px;
color: white;
font:bold 30px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
- this is the div part of the 'add to favorites' in the html (also floats too much to the left):

<a href="javascript:bookmarksite('Ceci%20Casariego',%20'http://www.cecicasariego.com');"><img src="images/favorieten.gif" width="114" height="37" class="top" style="border:0px;padding-left:162px;"
alt="" /></a>
I should probably place the 'add to favorites' into the css also, because the appearance differs in IE6 and IE7.
If I have these corrections, make a new stylesheet with it, and add the following (leaving the original stylesheet)


all will work fine, right ?
Last questions: does the stylesheet need to be called "ie6fixes.css"
Thanks so much !

rangana

05-28-2008, 09:26 AM

all will work fine, right ?
Last questions: does the stylesheet need to be called "ie6fixes.css"
Thanks so much !

My apologies, but I don't have IE6 for testing here, so can't really look into your codes on that browsers :rolleyes:

Anyway, it need not to be "ie6fixes.css". This is just your "personal" preference as what your CSS for IE6 is named.

For example, your CSS for ie6 is named as chechuie6.css, then you call the same file (using the same conditional comments).

chechu

05-28-2008, 01:33 PM

My apologies, but I don't have IE6 for testing here, so can't really look into your codes on that browsers
Could anyone have a look in IE6, please ?

chechu

05-28-2008, 05:17 PM

I took away the 'add to favorites' and changed the stylesheet, and now it seems that the menu on the left is equal, but the copyright is floating again. Also it seems that the content in IE6 is not in the middle, but more to the left.
Hopefully I can solve this, and then I guess the whole site is the same in IE6, IE7 and Mozilla 1.8 ...
Help is appreciated !

sandyk3

05-29-2008, 04:04 AM

I tested your page with my account at browser shots. One thing I would suggest, when you use browsershots, under all of the browsers you can choose from is a menu going across. There is "none" - click on that and then you can pick what browsers you really need. You had requested more than 190 shots today and I couldn't request any more except with my account. I don't mind at all.. no skin off my back, but you would have more shots available to you if you first pick none and then just pick the ones you need. Anyhow, I created a quick page for you.. this is IE6.

http://sandysdesignline.com/test/chechu.html

Also, for validation you can also use, for HTML: http://validator.w3.org/ and for CSS: http://jigsaw.w3.org/css-validator/

I am trying to figure this out. I'm thinking of creating a separate css file for you divs - left and sublink. you do not have to put all of your css in this file.. just the div's you want IE6 to look at. Start there and start styling those two divs different.. make the changes one at a time and very dramatic.. like add 50px padding to top and see where it goes. At that point... once you have the div acting and going in the right direction you know what div and what style needs changing. At that point it just a matter of playing with the file until you get it all right.

Remember, tomorrow when you start testing using browsershots, only request IE6 and IE7 until you get it the way you want. Then add more browsers in the Windows and MAC catagories. I don't test for the others. You can if you like.

I'll start playing with the files.

san

chechu

05-29-2008, 07:25 AM

Also, for validation you can also use, for HTML: http://validator.w3.org/ and for CSS: http://jigsaw.w3.org/css-validator/

I did both, and cleaned up the whole mess. Now both are good.
I will fix the copyright issue, as it came back solving te menu issue. So the only thing is: why is the whole site more to the left in IE6 ? If you could solve that, I would take this challenge as overcome.

Is this the cause of the issue here with the left positioning ?

#headerNL{
width:745px;
margin:0 auto;
padding:0 0 0 33px;
height:260px;
background:url(images/headernewNL.gif) 0 0 no-repeat;
position:relative;
}

The copyright issue is solved (I removd the background), so only the left aligning needs to be removed in IE6.
And then I'll have a drink ... with cheers to you, Sandy.

Medyman

05-29-2008, 03:32 PM

Hey Chechu...

Try adding this to your CSS:

html,body {
text-align:center;
}

chechu

05-29-2008, 04:08 PM

Doesn't work. The menu items place themselves on top of the portrait.

Medyman

05-29-2008, 06:30 PM

Sorry...I made an assumption about your markup.

I think adding the same style (text-align:center) to your header-main div should work.

chechu

05-29-2008, 06:50 PM

No, looks like this:
http://www.cecicasariego.com/screenshot1.gif
This is the css:

body{
padding:0;
margin:0;
}

div, h1, h2, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}

ul{
margin:0;
padding:0;
list-style-type:none;
}
.spacer{
clear:both;
font-size:0px;
line-height:0px;
}

#header-main{
width:100%;
height:260px;
background:url(images/pattern.gif) 0 0 repeat-x;
}

#headerNL{
width:745px;
margin:0 auto;
padding:0 0 0 33px;
height:260px;
background:url(images/headernewNL.gif) 0 0 no-repeat;
position:relative;
}

or does it something have to do with the doctype ?

<!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">

Medyman

05-29-2008, 08:22 PM

or does it something have to do with the doctype ?

<!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">

Yes, in fact it does. A few points here:

1. That's not your entire doctype declaration. A quick look at your site's source reveals you're also adding an XML deceleration above the XHTML DTD:

<?xml version="1.0" encoding="iso-8859-1"?>

I think if you remove that, IE6 will start behaving a little better. Not sure why you have it, but whatever the reason it's incorrect.

2. You shouldn't be using XHTML Transitional anyway. XHTML isn't supported by IE. Besides that, you're not using XHTML! You're using HTML.

Even if you need a transitional DTD, use HTML 4.01 Transitional.

chechu

05-29-2008, 09:28 PM

What doctype should I use then ?
This one ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Medyman

05-29-2008, 09:33 PM

If you need the transitional DTD, use HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Otherwise, use HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

chechu

05-29-2008, 09:48 PM

Thanks for your reply, but I don't know wich one I need !!
What is the difference between both, in simple English ?

Medyman

05-29-2008, 09:51 PM

See if this (http://www.456bereastreet.com/archive/200512/transitional_vs_strict_doctypes/)helps.

chechu

05-29-2008, 09:54 PM

So it seems strict is better.
Will change it, and then I think the whole mess is solved. THANK YOU !!

chechu

05-29-2008, 10:12 PM

When I check my site here http://validator.aborla.net/
it says that my doctype is XHTML 1.0 Transitional.
And when I wish to validate http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cecicasariego.com, it says the page is not valid HTML 4.01 Strict !
Now I'm confused !

rangana

05-30-2008, 12:05 AM

Medyman

05-30-2008, 02:17 AM

You're serving your page as HTML and not XHTML.

Seeing the validation errors, it's just you need to remove your self-closing tags, from the image (<img />) and meta (<meta />) :)

Remove the highlighted in red, and see how the validation works.

Yup...the DTD is HTML. I'm not sure what's up with that other validator, but I'd trust the W3C's one over the other one.

It only seems you have a few things "wrong". They're just minor things that have no real bearing but if you're a stickler for validity:

1. Remove the trailing slashes as rangana shows
2. Change language="javascript" to type="text/javascript"
3. You're also using a target attribute. This is deprecated in HTML 4.01. So, to be valid HTML 4.01 Strict, you would have to use JavaScript. You could use the HTML 4.01 Transitional DTD in which the target attribute is allowed. I would just leave the target attribute there with the Strict DTD and not worry about it not being valid. The standards in relation to the target attribute make no difference to the browser.