Strange rendering behaviour

[leehack]

Take a look at the these styles defined at the top of your code, noting particularly any widths specified:

<div class="page_header" align="left"> <align="right"> <div class="page_header_content"><div class="page_header_logo_container">

The code in blue doesn't need to be there either, i presume you've been having a play with it.

The classes defined in this code may need looking at also:

<div class="page_menu" align="left"><div class="page_menu_content"><div class="page_menu_items">

and finally you have a table specified for the main body with 100% width:

<table border="0" cellpadding="5" cellspacing="0" width="100%" >

The site currently renders wider than 1024 which is something you want to stop. You want the site about 980px wide or 95% to sit nicely on a 1024 screen.

[Donald Gray]

www.thepenzone.co.uk

Tristam

Hi Tristram
I seem to have resolved my problem by resetting the page settings - I don't think that is your problem though.

I don't know what your design specs are with regards to browser width but I just tested your site by a crude but reasonably reliable method...

Firstly, I have a 24 inch monitor capable of 1920 x 1200 native resolution & this allows me to set the browsers width to anything below this resolution. I reduced the width of yours to the point when the horizontal scroller kicked in & then backed of until it just dropped out again.

Secondly, I used an on screen pixel ruler to measure your total browser width of 1055 pixels

It is my belief that ideally a design should rendered in 800 or 1024 pixels maximum.

Do you have too many columns? I only looked at your home page...

Hope that helps

(ps - if you dont already have one, an on screen pixel ruler can be downloded from: http://www.mioplanet.com/products/pixelruler/index.htm )

[tristam]

Thanks guys

I have managed to locate and change the first mistake but the other 2 lines -

<div class="page_menu" align="left"><div class="page_menu_content"><div class="page_menu_items">

and

<table border="0" cellpadding="5" cellspacing="0" width="100%" >

I can't find. I can find them when I view source in browser but not in Actinic.
I have looked in the layout code with the advanced view but can't find anything like this.

Tristam

[cdicken]

They are all in 'Works Best With Executive' - although the code you quote is different to what is in there by default.

Just do a search for 'page_menu'. Mine contains...

<div class="page_menu" align="center">
	<div class="page_menu_content">
		<div class="page_menu_items">...

The <table> code you quote could well be within a one of the 'Sub Section List' layouts you'll find within the 'Sub Section List' group in the library. To edit the code you need to go into them and then click the orange link that says 'Click here to edit list layout settings'.

[tristam]

Thanks

I have sorted this now.

Next problem - how do I use more of the page?

My page is only 763 pixels wide with a big empty space on the right.
I have left aligned the site hoping that i can use the all of the screen.

Tristam

www.thepenzone.co.uk

[leehack]

My page is only 763 pixels wide with a big empty space on the right. I have left aligned the site hoping that i can use the all of the screen.

If you have the width set to 763px as you say, it doesn't matter how wide your screen is, the site will adhere to this width.

In previous posts you asked how to stop the site filling the screen (100% width), now you want to fill it more. Can you specify exactly what you want to do as a lot of time seems to be spent illustrating various things, only for you to change your mind.

[tristam]

Sorry for being confusing.

My screen was originaly full but this was a problem with IE6 I have now shrank the screen so that it works with IE6 but this means that I can't use any more of the screen and have a lot of white space on the right. Is it possible to use the full screen and still work with IE6?

Tristam

[pinbrook]

Probably you should sit down with a pen and paper and gather your ideas together about what you want to acheive.

When designing a site you must take all browsers into consideration - at the mo the 3 bigs ones are IE6, IE7 and Firefox. You also must design for a range of screen resolutions - again most people now start at 1024. You also need to decide how you will deal with widescreen.

With all those considerations in mind you then come up with your design, the biggest decision being whetherto use a fixed width 750 pixels for example or a fluid 100%.

Then you have to learn the CSS/HTML to acheive those ends.

At present you seem to have got in a bit of a mess as you have closed off many avenues by coding a hack to resolve an IE6 problem. You should aim to resolve the issue properly with clean code so you don't limit yourself in the future. (or tie yourself up in knots)

Its not easy learning CSS, HTML and Actinic in a day

[leehack]

Yes absolutely, im not aware of any browser that won't cater for 100% width. IE6 is certainly not the greatest browser, however it will usually work fine if the coding is something like correct. Your problem on IE would have been due to incorrect coding, not a fault in the browser itself. If i recall correctly you had your left section set to 140% width to get it to work correctly. If you codge the site now while you are building it, you will struggle to come up with a design that will work across browsers now and also in the future.

Its no good codging sizes in to get things working, i understand that this can appear a good solution when you look at the code and it looks like double dutch, however trust me, it is not the way forward. You may have made so many changes now that you cannot reverse some of the things you have done. Reapply the theme and start again with a fresh actinic template, upload the store, provide us with a url and explain what you need some guidance on.

Chris has already confirmed that another part of your code is not standard, as did i and i would strongly recommend starting again. You may end with code that is undecipherable for an experienced coder, let alone yourself with little knowledge in this area, you really want to be keeping things as simple and straightforward as possible while you get used to anything.

[tristam]

Executive is in the center of the screen and i originaly wanted to use the full screen (1024). I left aligned it then changed the layout settings (140%) to fill the page and it looked ok.

I then found that this didn't work with IE6 so I changed all the setting to 549 and this worked fine. These are all i have messed about with. It may go a little bit further than 549 but I haven't tried that yet as the only person I know with IE6 is on holiday.

If you look at this page on my site you will see that every thing is a little squashed.

http://www.thepenzone.co.uk/acatalog/cross_pen.html

[pinbrook]

Revert to the default executive theme, and test in all browsers before making any changes.

[leehack]

Tristam i agree with Jo. Your main problem is that if we tell you what needs changing, the changes might not work because of the codges in there. For instance i cannot recall ever having sized anything at over 100%, except for a font size declaration. If its 100px wide and i want it to be 140px wide, i will put 140px wide, not 140%.

Take some advice of people who have been there, get the layout back to completely standard and start again, you will end up in knots otherwise - its hard enough to get to grips with, without any further complications.

[Donald Gray]

Tristram, You can't go wrong by taking Lee's and the other gurus Advice.

Many website creators often build a site that looks good on THEIR monitor and in THEIR browser. This is a often a big mistake...

For example, my screen resolution is 1920 x1200 (on a 24 inch monitor). If I were to design to that resolution, very few folk would be happy. It would cause 99% of visitors to have to do a HORIZONTAL scroll. They'd soon get pee'd off doing that.

Taking the stats from one of my other sites, from a sampling of nearly 20,000 visitors, you may like to note:
Browsers:
MSIE (all versions) = 83%
Nutscrape = 12%
Others (inc firefox, Opera etc) 5%

Screen Resolutions:
800x600 = 35%
1024x768 = 46%
1280x1024 = 10%
All others above and below those listed = 9% of which about 1% still using 640x480

Personaly, I try to design for a 800 width as this satisfy just over 91% of visitors.

I don't know the actual screen resolution your monitor is set a but if it is set to 1024 or higher, it is essential to know your design widths. You can do this in taking careful note of the settings within Actinic. Alternatively you can use an on screen 'Pixel Ruler' - do a google of one... Personally I use a freebee from:
http://www.mioplanet.com/products/pixelruler/index.htm

I use it to drag the browser width to 800 or 1024. I also use it to measure images, blank space etc - a very handy tool

Have a look at some of the major websites out there, bbc, cnn, amazon, ebay etc. they all design to an 800 pix constraint.

There is no hard and fast rule about design width - it is subjective. Every designer, however should ask themselves the following:
1) do I design to show off my skills of how clever I am with graphics, flash etc...
2) do I design according to what the customer/visitor/wage payer wants to see

All food for thought!

[Lara Clark]

Hi Tristram,

Have you managed to resolve this issue now?

Kind Regards,

Lara Clark
_____________________________

Actinic Software
www.actinic.com | www.actinic.co.uk

[leehack]

Is it me or is there a load of new Actinic bods appearing?

Hi Lara.