PDA

View Full Version : CSS template shift problem


OtterTail
02-16-2007, 04:05 PM
Hi. I'm new to all of this. I made a simple template using CSS. When I view the template and the pages I made with it by using the "View In Browser" link they look as expected in Safari, IE and Firefox. However, when I navigate to the pages the editable region shifts left so it mostly covers the sidebar in all 3 browsers. I have no idea why it looks different or what is causing the shift.
Here is an example: http://www.ottertailart.com/about_contact.html

I have spent frustrating hours, but just can't figure anything out, especially when it looks fine when I check it with "view in browser".

Thanks in Advance for any help!!

BTW, I have the sidebar positioning set at absolute, 14 px from the left and 130 px wide. I have the editable region positioning set at absolute and 159px from the left. I can't figure out why it moves over to the left when I browse to the pages but stays where it should be when I click on "view in browser".
Thanks.

ramandeep
02-16-2007, 05:03 PM
Hi,
You are using absolute positioning for the elements, i am not a big fan of it but as a fix
As per your CSS

#sidebar {
position: absolute;
width: 130px;
left: 10px;
top: 162px;
color: #99CC99;
height: 455px;
}
#main {
padding: 10px;
position: absolute;
left: 25px;
top: 155px;
right: 10px;
bottom: 10px;
width: 697px;
height: 603px;
color: #FFCCCC;
background-color: #000000;
}


Your sidebar is positioned 10px from right and have a fixed width of 130px, which means you are covering 140px area on left.

Your main( which contains the text) is placed at left: 25px; from right which makes it come over sidebar, if you give it value around 145px, it will be ok.

let me know if you got it otherwise i will post code for you.:-)

ramandeep
02-16-2007, 05:05 PM
Sorry, Welcome to Dreamweaver club!

OtterTail
02-16-2007, 07:07 PM
Thank you, ramandeep!

I actually understand your answer, but I don't see that code :confused:. Everything I see within DW says the editable region is set at 159 px from the left ??? Your code shows 25 px. I don't know where to find that to fix it. I am looking in the "Tag - Relevant CSS" box on the right of DW, the property inspector for the editable layer, as well as within the code view of my CSS file. All show 159 px from left.

Sorry to be so dumb :roll:.

I wondered about using absolute positioning, but I just don't know enough to do otherwise and understand the consequences. I am using "Dreamweaver MX 2004 - The Missing Manual" by DS McFarland and whatever tutoritals I can find online as my main guides. I appreciate any help - thank you, thank you!!!

ramandeep
02-17-2007, 11:34 AM
you got a file attached layout1.css, please check layout1.css you will find the code i mentioned there.

OtterTail
02-19-2007, 08:04 PM
Thank you ramamdeep.

After sleeping on it I finally figured out that the reason I was seeing 159 px and you were seeing 25 px was because when I uploaded that page I did not have it upload the associated files (thinking there were no new ones) and the CSS file you saw was different than the one I saw. That's why it looked fine when I did "view in browser" but was wrong when I navigated to the page. I re-uploaded and now it looks correct.

Thank you so much for helping me through this. I barely know what I am doing and having someone/someplace to turn to like this forum is a gift! Your input is greatly appreciated.

ramandeep
02-20-2007, 03:55 PM
You are welcome, and feel free to ask any sort of questions here (basic or advance).