[css-d] WebSite IE Debugging Help

[WEZ!]

Heya All, well it seems my emails are getting through though I 
haven't had a normal list email for quite some time. Odd but I'll 
have to solve that bug once I get this sorted out.

http://www.avize.com.au/avize12.html

I've been developing my Business Site at the moment and got it to the 
state I want in compliant browsers without too much trouble. Now I'm 
back into the glorious stage of IE win testing and after a couple of 
days of testing, searching, researching etc I'm going to ask some of 
the gurus on here.

I'm focusing on IE7 at the moment as IE 6 is a complete disaster. 
Porblems left are:
1) Header Right Image should be aligned to the end of the bar (floated right)
2) Newcolumn should be centred on its column
3) Footer Right same as above
- top three all seem like the same float margin bug but can't seem to 
get it resolved
4)Inspire block in middle should be centred
5) Content Blocks have whacked out borders (this will be IE italic 
bug I haven't tackled yet)

6)Footer Left Block has smaller line height than standards browser
7) Google CSE bar at top left has larger line height - set to 1px 
height the bar loads as 1 px then something triggers it to enlarge 
but another 5 or so
8) Login Text input not centered
- the last three seem to be line height problems.

You'll have to excuse the site is far from refined (and the various 
zoom hopes) at the moment. If anyone can recommend solutions or where 
I can read further to find solutions that would be fantastic.

Wesley Lamont
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] WebSite IE Debugging Help

[David Laakso]

WEZ! wrote:
> http://www.avize.com.au/avize12.html
>   

Prevent all versions of IE from going totally goofy with font scaling:
body { font-size: 100%;}
> I'm focusing on IE7 at the moment as IE 6 is a complete disaster. 
> Porblems left are:
> 1) Header Right Image should be aligned to the end of the bar (floated right)
>   


Amend selectors to read (holds in compliant browsers-- IE 6/7 follow suit)::
#header {
position: relative;
font: 0.75em/1em arial, helvetica, sans-serif;
height:140px;
/*width: auto;*/
padding:0 160px;
margin:0 0 1em 0;
background: url(headerbi.png)/* repeat scroll left*/;
/*zoom:1*/;
}
#headerright img {
height:80px;
width: 285px;
/*float:right;*/
/*width:42%;*/
position: absolute;
top: 1.15em;
right: 0;
/*position: relative;
margin: 3px -155px;
position:relative;
display:inline;
zoom:1;*/}
> 2) Newcolumn should be centred on its column
>   
Amend to read (holds in compliant browsers-- IE 6/7 follow suit):
#newscolumn{
display:inline;
position:relative;
float:right;
margin: 5px -156px 5px 6px;
width:150px;
/*overflow:hidden;
z-index: 11;*/}

> 3) Footer Right same as above
> - top three all seem like the same float margin bug but can't seem to 
> get it resolved
> 4)Inspire block in middle should be centred
>   

#inspireblock (your site's primary content) is freaking hard to read :-) .


> 5) Content Blocks have whacked out borders (this will be IE italic 
> bug I haven't tackled yet)
>   
Not sure what you mean about the borders...

Amend to read:
clientbody p, .avizebody p {display:block; position:relative; margin:1em 
0.25em; color:#660066; font: /*bold italic small-caps*/ 
/*1.1*/1.2em/*/1em*/ Arial, Helvetica, sans-serif; 
text-align:/*center*/left;}

> 6)Footer Left Block has smaller line height than standards browser
>   
not done
> 7) Google CSE bar at top left has larger line height - set to 1px 
> height the bar loads as 1 px then something triggers it to enlarge 
> but another 5 or so
>   
not done
> 8) Login Text input not centered
> - the last three seem to be line height problems.
>   
not done
> You'll have to excuse the site is far from refined (and the various 
> zoom hopes) at the moment. If anyone can recommend solutions or where 
> I can read further to find solutions that would be fantastic.
>   
See:

and


Many those zoom:1 and position: relative; rules are not needed. 
Carefully weed them out. Validate the markup-- you have 40 errors...
Not all of your requirements have been met.
Test file here:

any changes made that I may have neglected to wite above are on the css 
file, here:


~d

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] WebSite IE Debugging Help

[David Laakso]

WEZ! wrote:
>
>
>
>> Prevent all versions of IE from going totally goofy with font scaling:
>> body { font-size: 100%;}
>
> ahh forgot to put that back in from previous work. Though I recall 
> font-size:100.01% was suppose to help Safari or Opera in certain cases 
> as well. I didn't actually recall that being an IE helper but since I 
> got sizing issues I'll have to see if it helps here.


What more could anyone ask :-) ?

>
>
>>> I'm focusing on IE7 at the moment as IE 6 is a complete disaster. 
>>
>
> is that for IE5? surely IE6/7 would ignore the commented css?


Rules enclosed between /*...*/ means to delete same.



>
>
>
> How is it showing up hard to read. What OS/Browser/Resolution are you 
> using? I coding on mac which has standard antialiasing which always 
> makes fonts look good. Renders I have seen from PC look fine as well 
> but there could be something I'm not using




Whatever does it for you and yours is fine with me. As for myself, I 
have difficulty with tiny-type set bold italic uppercase. Such is life...



>
>
>
>
>>
>>
>>> 5) Content Blocks have whacked out borders (this will be IE italic 
>>> bug I haven't tackled yet)


Holding on your solution...


>>>
>>
>>
>>>
>>
>
> Yeah not been validated yet. I run through that later in the cleaning 
> step. It can solve problems if I've missed something type wise. Once 
> its working correctly I can most likely halve the css if not more.


That could be a nice touch :-) .


>
> awesome work :) Thanks for your help. I'll work through what I can and 
> post back up depending on outcomes.


Trust me. I can't speak for others but personally, I can hardly wait.. ;-)


>
> Wesley Lamont

~d


-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] WebSite IE Debugging Help

[WEZ!]

Heya David and Co,

http://www.avize.com.au/avize13.html

My last reply didn't get to the list due to wrong email address but 
thsi one will. I've managed to solve the major issues with Davids 
help from earlier. Summaries are as follows:

Added Font:100.01%
-  Didnt' solve anything but its a standard problem reducer so its staying.

Changed Margins on right blocks:
Adding the 6pixel inner margin solved the centre and footer right 
hand block centering. I had reduced the inner margin in case of ie 
not positioning it correctly and then float dropping. How ironic. 
Seems fine now in IE7 and standards browsers.

I also altered the header block with the same logic. It appears that 
floated right blocks in IE7 are positioned by their left margin than 
their right margin which goes against the w3 standards from my 
recollection. Added an arbitrary 30 px seem to solve that problem.

David's solution of absolute positioning and fixed width worked and 
full width browser but the site is designed to scale down to a 640px 
browser. Though it did make me wonder how successful a layout would 
be with a negative margin content and two absolute positioned columns 
on either side. (logically it seems fine - as there would be no need 
for floats etc - but I'm sure practically there is something lacking 
- most likely vertical positioning down the page)

The Entire Content block had damaged margins due to Italic text when 
removed not only solved the odd margin fluctuation but also the 
layout of the inspire box.

So it looks mainly correct now. Few line height bugs remain but its passable.

>>>Prevent all versions of IE from going totally goofy with font scaling:
>>>body { font-size: 100%;}
>>
>>ahh forgot to put that back in from previous work. Though I recall 
>>font-size:100.01% was suppose to help Safari or Opera in certain 
>>cases as well. I didn't actually recall that being an IE helper but 
>>since I got sizing issues I'll have to see if it helps here.
>
>
>What more could anyone ask :-) ?


>
>>
>>
>>I'm focusing on IE7 at the moment as IE 6 is a complete disaster.
>>>
>>
>>is that for IE5? surely IE6/7 would ignore the commented css?
>
>
>Rules enclosed between /*...*/ means to delete same.

I missed your code alterations so all I was seeing was the comments 
and wondering how that was going to alter the output :)


>>How is it showing up hard to read. What OS/Browser/Resolution are 
>>you using? I coding on mac which has standard antialiasing which 
>>always makes fonts look good. Renders I have seen from PC look fine 
>>as well but there could be something I'm not using
>
>
>
>
>Whatever does it for you and yours is fine with me. As for myself, I 
>have difficulty with tiny-type set bold italic uppercase. Such is 
>life...

no that is perfectly valid point. The website isn't for me its for 
everyone who interacts with it. I've removed all the Italics as that 
was what was damaging the entire centre content. Without antialiasing 
the italics would be messed up.

The font should be a standard 12point arial which should be fine 
though I have noticed there is very little tracking between the 
letters on the standard arial which doens't help readability.

as for the small-caps that is there purely not to make a box of text 
quite so boring. I may have to tackle that another way.


5) Content Blocks have whacked out borders (this will be IE 
italic bug I haven't tackled yet)
>
>
>Holding on your solution...

ya Italics bug. IE alters the width of a container element containing 
full width italic text rather than let the italic's increased width 
flow out of the container. It was amusing see it stuff around the 
borders as it seemed to maintain the normal border underneath (let me 
guess, an IE7 patch over the IE6 bug) and then had a separate border 
ontop which moved with the text italics.

>
>

>>>
>>>

>>>
>>
>>Yeah not been validated yet. I run through that later in the 
>>cleaning step. It can solve problems if I've missed something type 
>>wise. Once its working correctly I can most likely halve the css if 
>>not more.
>
>
>That could be a nice touch :-) .

hehe now now, no mocking :). In the initial design stages the css is 
usually a horrible mess.

Though I'm guessing it will be complaining about zoom's use. 
Validating using css3 (to avoid complaints about text shadow)
23 errors, 20 zoom errors, one behaviour error and two * html errors.
hmm I'm actually surprised. all the errors I would have expected and no more.


>
>
>>
>>awesome work :) Thanks for your help. I'll work through what I can 
>>and post back up depending on outcomes.
>
>
>Trust me. I can't speak for others but personally, I can hardly wait.. ;-)

hahah such cheek :)

Thanks for you help once again David

Welsey Lamont

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.co

Re: [css-d] WebSite IE Debugging Help

[David Laakso]

WEZ! wrote:
> Heya David and Co,
>
> http://www.avize.com.au/avize13.html
>
>   
>   

Hold Opera, Firefox, and Safari. IE 6 and IE 7 will more or less follow 
suit...





-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/