PDA

View Full Version : CS4 Display Issues


rorygirl
01-15-2011, 11:54 PM
I'm creating a new website using CSS in CS4 and the site displays perfectly in
Design View and Live View but when I view it online using my testing server
it's a mess! All the formatting is gone. I uploaded the entire site again to the
testing server just to make sure and it's still not displaying correctly.
I'm not sure what I should be looking for at this point. Any help would be
appreciated.


Attached is a screen shot of the site within Dreamweaver's Live View and here is a link to the testing server: http://www.bigcowmusic.com/bigcowstudios/music.html

DWcourse
01-16-2011, 12:31 AM
The link to your style sheet

<link rel="stylesheet" type="text/css" href="file:///Glenn's HD/Glenn/WEBSITE 2011/BIG COW STUDIOS/style.css" />

Is pointing to a file on your local hard drive (the link begins with "file:///"). That's not available on the web. You may have defined your site incorrectly or there could be some other issue. Make sure the local root folder in the site definition points to the directory BIG COW STUDIOS and then try removing the link to the style sheet and reinserting it (menu: Format>Styles>Attach New Style Sheet…).

rorygirl
01-16-2011, 01:01 AM
Perfect! Thank you so much for the help!

rorygirl
01-16-2011, 01:24 AM
I spoke to soon. Things are better but now I'm getting different results. See attached design view. I'll attach the other 2 in the next 2 posts.

rorygirl
01-16-2011, 01:25 AM
Attached is the live view

rorygirl
01-16-2011, 01:27 AM
I can't seem to seem to attach more than one image.
Check out the URL again to the testing server and
you'll see the difference between the 2.

DWcourse
01-16-2011, 02:22 AM
Looks ok to me. What's the issue and in what browser?

rorygirl
01-16-2011, 08:39 PM
Thanks! All my issues have been resolved except for when I add a hyperlink to my navigation. Once I add the link the type size becomes extremely small. I checked my code and as you can see there's nothing dictating that the type should change size:

#nav
{
padding-right: 0px;
margin-right: -6px;
text-decoration: none;
}

#nav ul
{
list-style: none;
margin-left: 0;
padding-left: 0;
text-decoration: none;
}

#nav ul li
{
padding-left: 0;
margin-left: 0;
padding-bottom: 10px;
text-decoration: none;
}

#nav a
{
padding: 15px 10px 8px 10px;
text-decoration: none;
border: none;
}

#nav a:hover
{
border: none;
padding: 15px 10px 8px 10px;
background-color: #3a4247;
text-decoration: none;
border-top: 1px solid #4f585e;
border-bottom: 1px solid #4f585e;
border-left: 1px solid #4f585e;
font-size: 100%;
}


.nav_head
{
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
text-decoration: none;
font-variant: normal;
color: #CCF0C1;
}

.nav_tag
{
color: #C2DEF1;
padding-right: 10px;
text-decoration: none;
}


<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
body {
background-repeat: repeat-y;
background-image: url(Linked%20%20Art/background515.gif);
background-color: #30373b;
}

DWcourse
01-16-2011, 08:52 PM
The problem wouldn't necessarily be in that chunk of CSS, it could be in another rule that references links (or the <a> tag).

Can you post an example with the small type?

rorygirl
01-16-2011, 08:55 PM
the attached shows what happens to the nav type as soon as I apply a hyperlink.

you can look at the code here:

www.bigcowmusic.com/bigcowstudios/music.html

DWcourse
01-16-2011, 08:57 PM
actually I meant could you upload the page to your website.

rorygirl
01-16-2011, 08:59 PM
I just uploaded it here:

www.bigcowmusic.com/bigcowstudios/music.html

DWcourse
01-16-2011, 09:06 PM
1. You created the larger type for the menus by applying the class nav_head to a span.

2. When you added the link you wiped out the span so the text size reverts to the text size you set in the body rule: 65% (or about 10 pixels).

3. you should get rid of the span and apply your rules directly to the <a> tag. Either by applying the class nav_head to them or by writing a new rule

#nav a

that will apply only to links within the object with id=nav.

4. Your other existing links are to files on your hard drive (they start with file:///) and will be broken when you upload the file unless you fix them.

rorygirl
01-16-2011, 09:12 PM
Thanks for the quick reply but I'll need a little more direction as I'm html challenged and after years of creating my website using tables I just started this week working on a site using CSS. I would appreciate it if you could provide me with a step by step regarding removing the span and applying rules directly to the <a> tag.

Also, I realize my other links are to files on my HD. I haven't set those up yet.

DWcourse
01-16-2011, 09:57 PM
you can delete the span tags by editing in the code or, in design view:

Click to place the insertion point within the span,

Then right click the <span? tag in the status bar at the bottom of the document window and select Remove Tag from the pos-up window.