navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Positioning with CSS

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Positioning with CSS 		Page: [1]
 
Donkey

 

Posts: 3892
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

  		Positioning with CSS - 9/8/2003 14:06:55   
I am still playing with test pages trying to learn CSS, and I have just spent all afternoon trying to resolve 2 problems that are really getting to me.

Problem 1.
I am using a positioning layout of <div> columns expressed as percentages. All columns add up to a total of 100%. Within some of the <div> columns are images, I have enclosed these in <p> classes that use the command "text-align: center". This centralises the images when the page expands and works OK.

I have a logo image which is inserted as a server side include, on the include page I have done exactly the same thing i.e. a <p> within a <div>. The logo <div. is 14% wide and it sits on top of another include which is also 14% wide (navigation). The logo won't centralise it stays to the left. Is there another way of centralising the logo image within the <div>.

Problem 2
I have a header within a <div> that is intended to line up horizontally with the above mentioned logo. By trial and error I got it to work in IE, Mozilla, Opera and Netscape, then I validated the page and added the strict doctype declaration, and suddenly the header position had dropped down considerably in NN and Mozilla. I have tried changing margins, absolute position, padding and using in-line styles to change the vertical alignment, but nothing works for all four browsers. It's as though Netscape/Mozilla automatically add about 3% to the "top" value, but the strange thing is that the logo (which is an include) is perfectly positioned. Is there a way of adjusting the position only for Netscape/Mozilla?

I hope I'm just doing something stupid that will be obvious to the experts out there.

Thanks in advance.
Peter

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens
sity

 

Posts: 86
Joined: 12/28/2001
From:
Status: offline

  		RE: Positioning with CSS - 9/14/2003 14:27:09   
Problem 1.

Make sure that your SSI is reading the CCS. I have forgotten to do this in the past.

Problem 2.

Unfortunatly, CSS is not an exact science and having things to appear the same in every browser is a rare occasion. However, their may be a work-around that you are not using. Without seeing the site, I cannot tell. Check out:

http://www.zeldman.com/externals/

and look under css, markup & standards. Make sure to use things like the Box Model Hack to ensure the site appears as close to perfect in every browser. You seem to be involved with some advanced CSS, so I wont be suprised if this page is already in your favorites. :)

Sorry I couldn't be more specific

_____________________________

quote:

20% Off Web Hosting & Domain Names Through July!    Coupon Code:julysave

www.razorhawk.com

(in reply to Donkey)
Donkey

 

Posts: 3892
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

  		RE: Positioning with CSS - 9/14/2003 20:18:59   
It's only a test site on a test server.

I have found a solution in another forum (thanks to Krycek in the coding forums), you copy your stylesheet and create a stylesheet for mozilla/netscape naming it "mozstyles.css" and re-name the original stylesheet "iestyles.css".
Then you link to the style sheets as follows
<link href="/styles/mozstyles.css" rel="stylesheet" type="text/css">
<!-->
<link href="/styles/iestyles.css" rel="stylesheet" type="text/css">
<!-->

The second link is within comment tags so it is ignored by compliant browsers like mozilla and netscape, but non-compliant IE links to it.

Then all you do is "tweak" the settings on both sheets until the positioning looks roughly the same in each browser. It works well, Opera is still slightly out, but it looks OK and I can live with it.

I hope it's not "bad form" to link to another forum, but I wanted to share the solution without taking credit for someone else's idea.

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Donkey)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Positioning with CSS 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.