CSS Style Problem in some browsers

I’m Using Dreamweaver Studio 8.0. on the PC.
Some of my CSS Styles info does not work in some browsers.
The “main_content” section of my site does not
display properly in some browsers.
Here is the CSS code:
#main_content {
position:absolute;
left:134px;
top:180px;
width:651px;
height:597px;
z-index:6;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-left-style: none;
border-top-color: #0000CC;
border-right-color: #0000CC;
border-bottom-color: #0000CC;
border-left-color: #0000CC;
border-right-style: solid;
border-bottom-style: none;
It works fine in FireFox 1.5 and Netscape 8. But in IE 6.0.2
and Safari 2.0.3 the main content section:
1. moves to the far left of the page (behind a left side
image border)
2. loses its width restriction and fills to the right
whatever size monitor display it is on
3. loses the solid right border of this section
The “.copyright” info also does not display
properly
.copyright {
font-size: 9px;
background-color: #666666;
color: #FFFFFF;
Again, it works fine in FireFox 1.5 and Netscape 8. But in IE
6.0.2 and Safari 2.0.3 the copyright section:
1. does not change to the smaller font
2. does not change font color
3. has no background color
Does anyone have any ideas?
Thanks,
David

Here's something you need to know:
There is no significant difference in the way that these
browsers render
valid CSS on pages with valid doctypes. Please post a link to
your page so
we can get at the bottom of this, and keep you from careering
off the cliff
edge that you are now teetering on! 8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"DAFsr" <[email protected]> wrote in message
news:enjt3a$orq$[email protected]..
> FOUND A WORK AROUND!
>
> Many of the CCS styles are not being picked-up by IE
& Safari. So I
> placed
> those codes that weren't being recognized back into the
div tags of the
> individual layers. I've got the positioning problem
taken care of, now I
> need
> to figure out the best way to get the other conventions
like heading type
> size
> and color to match in all browsers.
>
> Still don't understand why the CSS style sheet isn't
working in IE &
> Safari.
> But I'm hopeful at this point I will at least be able to
complete the site
> and
> get it to play okay in multiple browsers.
>
> If anyone has any other thoughts that might help me,
feel free to post
> away!
>
> Thanks,
>
> David
>
>

Similar Messages

  • Expanding box problem in some browsers

    My bottom three dividers are having an expanding box problem in some browers. Any idea how to fix? This is my first website and I am clueless.....
    www.privateinsurancebrokers.com
    Source Code:
    V <div id="container">
        <div id="main_image"><img src="Images/ThreeArch.jpg" width="960" height="400" alt="Kenneth G. Harris Insurance Agency" /></div>
        <div id="left_colum">
            <strong><a href="employeebenefits.html"><img src="Images/Website_EmployeeBenefits.jpg" width="310" height="127" alt="Employee Benefits Orange County" /></a>Employee Benefits
          </strong><br />
          Since 1972, Kenneth G. Harris Insurance Agency has advocated for our clients in the process of securing the highest value employee benefit program. <a href="employeebenefits.html" target="_new">Learn More»</a> </div>
        <div id="center_column"><strong><a href="HealthInsurance.html"><img src="Images/Family and Individual Insurance.jpg" alt="Family and Individual Insurance Services" width="310" height="127" align="top" /></a>Individual & Family Insurance Services
        </strong>Kenneth G. Harris Insurance Agency will work with our insurance and financial partners to assist you with all aspects of your personal insurance needs. <a href="individualinsurance.html" target="_new">Learn More»</a></div>
        <div id="right_column"><a href="news.html"><img src="Images/blog.jpg" width="310" height="127" alt="Health and Life Insurance News Orange County" /></a>
          <strong>Information</strong> <br />
    Keep up-to-date with the latest employee benefits and private insurance news. Let us serve as your resource for health care  reform news and<a href="article2.html" title="Kenneth G. Harris Insurance Agency Group Health and Individual Insurance" target="_new"> more»</a></div>
    </div>

    Your CSS Layout has a provision for clearing floats but I don't see it in your HTML markup.
    Insert a float clearing <br> <p> or <hr> right above your footer division like so:
    <hr class="clearfloat" />
      <div class="footer">
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Weird problem with some browsers showing content that is meant to be "off screen"

    So as you might guess from the title of the post, I'm new to both Catalyst, and HTML, and publishing websites in general.
    I created a website in Catalyst using a 1000x700 Photoshop design. I made it so that the transition from page to page occurs with the screen elements moving in from the sides with an elastic effect. I published the site for uploading to the web, then brought the file into Dreamweaver to simply put it on a black background, and save it as index.html. for uploading to my service provider.
    Everything is working fine from a transition perspective, and from my testing in Internet Explorer 7 and 8 as well as Firefox, it seems to be fine. However, one person I work with - who is also running Internet Explorer 8 - finds that when she views it, there is a small white strip along the right side and the bottom of the displayed .swf. In this right strip, on several of the pages, she can see part of the elements off to the side that would normally be sitting out of view on the artboard: In other words, elements that were animated out of the way when she linked to current page.
    I thought I was being clever by following advice posted elsewhere here, and created - or tried to create - a pseudo clipping mask by dragging a 1000x700 rectangle around each screen, converting it to a custom component, editing it by deselecting Modify > Auto Size content, and selecting Modify > Clip to Component Bounds, and republishing. No dice.
    I know I could just go in and move those elements further away from the "stage" so that they wouldn't appear in this weird white strip, but I'd still be left with the strip. At this point, I've made so many changes in Catalyst I'd also really like to avoid bringing it back into Photoshop to make any changes. I'm wondering if anyone else has encountered this, and if so, how was it rectified. Perhaps there's a way to provide something like a clipping mask in Dreamweaver? Any help would be appreciated.

    Sounds like they need to update their browsers and players, or download different ones that they're missing.
    There is no way to ensure anyone's computer will play an .MP3 the way you want it to. There are a number of programs out there that play .MP3s and will be set as the viewer's default player for that file type simply depending on which ones were installed and which ones they allow to set to handle .MP3s.
    The second part, where they ask if you could make it so viewers could click on a player...
    You could have multiple file types (a .mov for Quicktime, a .WMV for windows media, etc) where the user clicks whichever player they want and the link goes to it's corresponding file type. That's probably the easiest way to achieve that type of functionality.

  • RH-generated WebHelp doesn't display some CSS styles

    I've worked with RH for a while, including creating other WebHelp projects in RH that have been deployed without any problem. On my current RH9 project, however, some of the CSS styles are not being applied after the project output is moved to a network directory. When I open the project output on my Desktop, the styles all render correctly.
    The styles in question aren't especially unusual:
    DIV.text {
              width: 640px;
              padding-left: 25px;
              padding-right: 25px;
              padding-bottom: 25px;
              margin-left: auto;
              margin-right: auto;
              background-color: #EDEBDE;
    P.footer {
              text-align: center;
              font-size: 8pt;
              line-height: 25%;
              color: #A13619;
    The kicker is that some of the styles ARE being applied (e.g., background image), while the 2 styles above are NOT being applied.
    Some of the things I've already tried include:
    - creating a new copy of the CSS file
    - making sure the correct stylesheet is referenced in the HTML files
    - making sure the correct stylesheet is referenced in the MasterPage
    - making sure the correct CSS type is specified in the HTML files
    - adding "!important" to the styles that aren't being applied
    Has anyone seen / resolved issues like this before?
    Thanks!

    Solution:
    My supervisor and I huddled on the problem and eventually found these discussions:
    http://stackoverflow.com/questions/4966952/ie-not-rendering-css-properly-when-the-site-is- located-at-networkdrive
    http://stackoverflow.com/questions/167657/will-targeting-ie8-with-conditional-comments-wor k#answer-168131
    I opened the IE Tools > Developer Tools panel, and used the Browser Mode settings to check the variations (IE7, IE8, and IE8 Compatibility). IE8 displayed all DIVs correctly, while the other two apparently severed the CSS file from the HTM file.
    I had to do a mass find/replace, pasting another meta tag below the RH generated compatibility check:
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    And there was much rejoicing.
    As an aside, the new meta tag did not work when I tried to apply it to the Master Page....which makes sense, I guess.

  • Site recently hacked, now FF won't display css style - other browsers will

    So my site beaq.org.au was recently hacked - a phishing attack. A .php file was uploaded to the css directory it seems. My host promptly removed the css directory, and I replaced it with a backed up css directory. Problem solved! (or so I would have hoped)...
    This did solve the problem in all browsers I have tested in - except Firefox. The site looks as it should in safari, IE, chrome etc. CSS style is used, but FF won't use it. I believe this is a result of the site being reported as an attack site...for example, if I choose preferences > security and then uncheck "Block reported web forgeries", then reload the page - it loads as it should.
    I have requested removal from the forgery list here: http://www.google.com/safebrowsing/report_error/?tpl=mozilla
    And the site is not listed as containing malware in Google Webmaster tools. So nothing to do there.
    Is it simply a matter of waiting till firefox recognises the site as not being a web forgery or containing malware? Is there something else that can be done to resolve problem? Or is there something that could be done to expedite the removal from FF's list of phishing / attack sites?
    It's been over a week already and still waiting. Not a good look having a website that is completely messed up. Thanks for your help in advance!

    I hadn't checked that link, but I can confirm that the CSS file isn't loaded because of a block via the phishing protection.<br />
    Google Chrome doesn't even open the main page and immediately shows the phishing warning page.
    <blockquote>Warning: Suspected phishing site!<br />
    The website at www.beaq.org.au has been reported as a “phishing” site. Phishing sites trick users into disclosing personal or financial information, often by pretending to represent trusted institutions, such as banks.</blockquote>

  • Very strange problem! Disappearing Css Style Sheets plus 404's

    I am creating a fairly simple form and am new to php mysql and jquery. However, I am moderately skilled in css and html.
    I am on a mac with Snow Leopard using dreamweaver CS5. The problem started this morning when I uploaded a preliminary version of my html form page and a php script page.
    Having previewed it with no problems on my local system, I thought my main challenge would arise from stumbling my way through ironing out the scripting. I still have that to look forward to.
    The first anomaly that occurred was that I kept getting 404 errors. After hours of tinkering around and uploading many trimmed down modified variations of the html file, I finally got past the 404 error page.
    However, it only would appear without my css styles. The file was originally linked to a previous css style sheet and is linked to a new one on local system.
    After doing some firebugging, I discovered that my newly uploaded (20 times) html file was still linked to the previous phantom, css style sheet on the server as well as a previous php file that I had linked to in development stages.Both of which are not on the server. So I uploaded the whole bunch of them again and got the same result. Nothing changed. All the css styles are still there but not.
    I know what you're thinking, it's impossible.
    The only explanation I can come up with is that my linux apache server is putting my files in a nonexistent temp folder. And for some reason the my site.css file is not being overwritten or removed at all.
    I then uploaded new versions of the html file with different names, thinking on an off chance that the file name 'contactform' might have something to do with the problem.
    You know what happened the newly named files triggered a 404 once again.
    It doesn't make since to me! I am totally stumped!
    My site is http://www.zoeinjewels.com and the page in question is http://www.zoeinjewels.com/contactform.html
    I am really behind schedule so your help would be most appreciated.
    Thanks

    Your CSS file as wel as both of your JS files are corrupt.
    Re-upload these three files and your problem is solved.
    To give you an idea of what your online CSS file looks like
    http://www.zoeinjewels.com/contactform.html
    http://www.zoeinjewels.com/_ccs/contact3.css
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>404.shtml</title>
    <link href="_ccs/errorpage.css" rel="stylesheet" type="text/css" />
    </head>
    <div id="wrapper">
    <div id="header">
    <h1><span></span>File Not Found<a name="top" id="top"></a></h1>
    </div>
    <div id="blback">
    <ul id="nav">
    <li><a href="#" class="Home">Home</a>
    <ul>
    <li><a href="index.html">Home</a></li>
    </ul>
    </li>
    <li><a href="#">Welcome Lounge</a>
    <ul>
    <li><a href="welcome/index.htm" title="Entry Lounge">Entry Lounge</a></li>
    <li><a href="aboutzoein/index.html" title="About Zoein">About Zoein</a></li>
    <li><a href="aboutzoein/shunyata/aboutshunyata.html" title="About Shunyata">About Shunyata</a></li>
    <li><a href="aboutzoein/media-book/index.html" title="In The Press">In The Press</a></li>
    <li><a href="aboutzoein/media-book/peoplespeak.html" title="People Speak">People Speak</a></li>
    </ul>
    </li>
    <li><a href="#" class="JewelGallery">Jewel Gallery</a>
    <ul>
    <li><a href="jewelgallery/p27.htm" title="Z Garlands">Garlands</a></li>
    <li><a href="jewelgallery/p51.htm" title="Z Rings">22k Rings</a></li>
    <li><a href="jewelgallery/p01.htm" title="Z Bracelets">Bracelets</a></li>
    <li><a href="jewelgallery/p79.htm" title="Z Pendants">Pendants</a></li>
    <li><a href="jewelgallery/p79.htm" title="Z Brooches">Brooches</a></li>
    <li><a href="jewelgallery/p09.htm" title="Z Earrings">Earrings</a></li>
    </ul>
    </li>
    <li><a href="#" class="ContactCenter">Contact Center</a>
    <ul>
    <li><a href="contact.html">Bali Studio</a></li>
    </ul>
    </li>
    </ul>
    <div id="content_r">
         <h6><span></span>
         <div id="title">Sorry, the file you were looking for could not be found. It may have moved to a new location. Please use the navigation menu above to help you locate the file.</div>
        </h6>
          <div id= "topimage"></div>
       <div id="notfound"></div>
        <div id="text">
    <p>"Sacred Geometry is the foundation of their jewelry designs and symbols are drawn from all the different traditions the world has to offer. Each precious piece endeavors to express three symbolic levels-the common, the educated and the spiritual-with careful selection of each stone to reflect meaning and value... The design and creative process is not a brief one. Each conscientious step reflects a careful and significant thought process. According to Shunyata "Every moment isinspired by the wealth, rhythm and miraculous spectrum of creation."</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    I hope this helps.
    Ben

  • Problem with Css styles not showing in live view or when i browse

    I am using Mac osx 10.6 and building website with Dreamweaver CS5.  Sometimes div tags i create not showing styles or rendering in live view or when I browse but  showing in design view. I looked in dreamwever faq and they talk about not showing in design view to toggle the display styles. That is not the problem becuase it is check marked and I tried turning off and turning on and made no difference.I am using firefox browser.
    It happened before the other day too. But all of my other pages in this site that i have created the same way building with div tags and css styles. So not sure what the problem is. Maybe someone has a suggestion here.
    Johanna

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Portfolio</title>
    <style type="text/css"></style>
    <link href="css/jbstyles.css" rel="stylesheet" type="text/css" />
    <style type="text/css"></style>
    </head>
    <body>
    <div id="wrapper">
      <div id="mainnav">
        <div id="navbar">
          <ul>
            <li><a href="index.html"><br />
            </a></li>
    <li>
              <ul>
                <li><a href="index.html">          Home</a><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Portfolio</a><a href="contact.html">Contact</a></li>
              </ul>
            </li>
          </ul>
      </div>
        <div id="contentinside">
          <div id="navbar2">
            <ul>
              <li><a href="design.html">Design</a></li>
              <li><a href="multimedia.html">Multimedia</a></li>
              <li><a href="webdesign.html">Web Design</a></li>
            </ul>
          </div>
          <div id="mm1thumb">Content for  id "mm1thumb" Goes Here</div>
          <div id="mm2thumb">Content for  id "mm2thumb" Goes Here</div>
        </div>
        <img src="images/multimsidebar.gif" width="212" height="615" alt="mmsdbr" longdesc="http://multimsidebar" />
      <div id="footer">
        <p> </p>
        <p>Johanna Bresnahan</p>
        <p>Web &amp; Graphic Design - http://www.johannabresnahan.com</p>
        <p> email: [email protected] ....phone....857•991•5717<br />
      </p>
    </div>
    </div>
    <!--end wrapper--></div>
    </body>
    </html> 
    Here is the html code above. not sure how to attach my file so get a visual. This is the first time I have used this forum.
    Johanna

  • Problem linking css style sheet

    I am trying to link a css style sheet to a new root file. When I try to link the css sheet I get an error - A recursive style import was found while trying to add CFTtemp.css. Please resolve this error by editing the file in an external text editor and try again.
    What does this mean?  I looked up recursive style everywhere and there is no explanation.  I don't know how to fix.  This css sheet works in other sites.
    screen shot attached

    Perhaps some CSS statement in the stylesheet is trying to import your stylehseet! Thus the recursive warning. Look for "@import" statements and see if its trying to import the stylesheet. Then either comment them out (/*your old CSS*/) or remove it. Save. And see if that solves it. But not being able to see your whole stylesheet, this is only a guess.

  • Safari 5.0.3 not loading CSS style sheets 1st time through

    When I go to my ecommerce site's https payment screen, the page HTML loads OK but the formatting is missing (so the screen is really messed up). If I hit the page re-load function the page re-loads with all the formatting corrected. It behaves the same with both the Mac and Widows versions of Safari 5.0.3. The problem did not occur on earlier versions of Safari (i.e., the Mac I use for testing the site worked perfectly on the now problematic page until I upgraded to the latest version of Safari).
    The problematic page works fine with all the other browsers that I have tried (IE7, IE8, Firefox, Chrome)
    My guess is that it has something to do with some @import url("css style sheet") directives that are imbedded at the beginning of the master style sheet for the page.
    This problem will stop all Safari 5.0.3 users from navigating our site so it is quite serious.
    Any help on this issues would be greatly appreciated.

    Further investigation has revealed that the following error message is being generated within Safari during the first time the that the page is loading,
    "Refused to load from document base URL. URL found within request."
    The <base> directive in the HTML, in this instance, is referring to a different URL than the one that the page is running from. The page with the problem is running on a remote server and back referencing to the home server for the <base> reference. This fails when the page first loads but seems to be accepted if a page-reload is done. It also works on all other browsers that have been tested.
    Is this related to a security setting in the browser?

  • Navigation & Photo Page not displaying within some browsers

    Hello,
    I am using iWeb '08 and am having great difficulties trying to get my site cross browser compatible. The site is working perfectly on the Mac in Firefox 2 & Safari but not Firefox 3. It is also not displaying correctly in Firefox 2.0.0.13 and IE7 on my WinXP machine. Unfortunately the error is not just a cosmetic issue. The Main Navigation is not displaying on any page and only shows a bullet point where it is meant to be. The other error occurs in the Photo Template and the photos are not displaying. I am using a "Version 1 template" and did a test with a "version 2" template that provided the same errors.
    Has anyone else had these problems???
    The site is located at:
    http://web.mac.com/maxkit/Kai/
    Photo Page:
    http://web.mac.com/maxkit/Kai/CurrentPictures/Pages/Snowy_AprilDay.html
    The test site is located at:
    http://web.mac.com/maxkit/Site/
    Thanks
    Max

    You have applied a height of "auto"to your menubar container, which gives it no height at all in some browsers. If you have a clue what height you would like to display for your menubar, give it, instead of:
        <div style="height: auto;" id="p7PMM_1" class="p7PMMh04">
    Better yet, leave it in the CSS file, where you will find it when you go looking for it. You already assign a height there:
    .p7PMMh04 {
        width: auto;
        height: 20px;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        background-image: url(http://home.roadrunner.com/~jgigandet/trinity/img/new_bk.gif);
        background-repeat: repeat-x;
        background-color: #000;
        text-align: left;
        line-height: normal;
    Because your inline style of height:auto; has more proximity (is closer) to the element being styled, it overrides the style in the stylesheet and applies the height: auto; instead of allowing the height: 20px;
    Beth

  • How can i load a specific CSS style sheet for Safari?

    Okay, So I have some structure issues when viewing my website on Safari compared to Firefox. Is there a way to put a code in the <head> tag to load a specific CSS style sheet for Safari like you can do with IE?
    Thanks.

    I took a screenshot of your page from Firefox (shown below).  I assume you're seeing the same problem in Safari.  If you increase text size one click, the keyboard image drops below the #contact division.
    1) Height is a restiction in all browsers except IE.  Avoid  using height values on containers with text in them.  If needed to show  a background image, use the min-height property.
    2)  Fix your code errors. Some browsers are very sensitive to errors.
    3)  Your #content lacks cohesion. You need 3 columns, each with a width in pixels.  Or simply use a 3-column table.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • CSS padding problems

    Hi
    I am building a site for a client that has had the page
    designed by a graphic designer and she is being EXCEPTIONALLY picky
    about the font size, spacing and many other things. The problem I
    have is, that on some browsers, the space between the text and the
    border at the top of the container, is double what it is in IE6 and
    IE7. Can anyone tell me how I can fix this so that it has the same
    amount of spacing in all browsers.
    Many thanks
    Julie
    CSS code:
    /* CSS Document */
    /*formatting divs*/
    body a p td th div blockquote ul ol dl{
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color:#999999;
    margin: 0;
    body { margin: 0px; padding: 0px; background:#262425}
    h1 {font-family: Arial, Helvetica, sans-serif;
    font-size:36px}
    a:link {
    text-decoration:underline;
    color: #000000;
    a:visited {color:#666666; text-decoration:underline;}
    a:hover {color:#ff9c04; text-decoration:underline;}
    /*layout divs*/
    #wrapper {width: 820px; position:relative; margin:0 auto;
    top:15%}
    #header {clear:both; height:50px; width:820px}
    #leftcol {
    width: 108px;
    float:left;
    padding-right:12px;
    text-align: right;
    #container {margin:0; padding:0; float:right; width:695px}
    #content {background-color:#FFFFFF; width: 328px; padding: 0
    10px 0 10px; height: 500px; float:left; color: #666666; font-size:
    14px; overflow: hidden;}
    #rightcol {width: 347px; float:right}
    #footer {clear: both}
    #text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
    /*menu*/
    #leftcol ul {}
    #leftcol li {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    list-style:none;
    .logo {
    margin-right: 0px;
    margin-left: 0px;
    padding: 23px 0px 12px 0;}
    /*design elements*/
    .scroll {
    scrollbar-face-color: #ffffff;
    scrollbar-shadow-color: #C2A2DA;
    scrollbar-highlight-color: #C2A2DA ;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color:#ffffff;
    scrollbar-track-color:#FFFFFF;
    scrollbar-arrow-color:#C2A2DA}

    Designing for the web is NOT the same as designing for print.
    Graphic
    designers do not understand that there are too many variables
    you can't
    control such as screen size, browsers, and the default text
    size used by
    visitors. Firefox, Opera & Safari will render pages
    differently than IE. In
    some cases, you can use IE hacks or CSS tricks to get it
    closer to what you
    want. Or you could make one big graphic or image map but I do
    not recommend
    this as it will impact your site's search engine rankings
    & user
    accessibility.
    --Nancy O.
    Alt-Web Design & Publishing
    www.alt-web.com
    "ukjooles" <[email protected]> wrote in
    message
    news:[email protected]...
    > Hi
    >
    > I am building a site for a client that has had the page
    designed by a
    graphic
    > designer and she is being EXCEPTIONALLY picky about the
    font size, spacing
    and
    > many other things. The problem I have is, that on some
    browsers, the
    space
    > between the text and the border at the top of the
    container, is double
    what it
    > is in IE6 and IE7. Can anyone tell me how I can fix this
    so that it has
    the
    > same amount of spacing in all browsers.
    >
    > Many thanks
    > Julie
    >
    > CSS code:
    >
    > /* CSS Document */
    >
    >
    > /*formatting divs*/
    >
    > body a p td th div blockquote ul ol dl{
    > font-family: "Times New Roman", Times, serif;
    > font-size: 14px;
    > color:#999999;
    > margin: 0;
    > }
    >
    > body { margin: 0px; padding: 0px; background:#262425}
    >
    > h1 {font-family: Arial, Helvetica, sans-serif;
    font-size:36px}
    >
    > a:link {
    > text-decoration:underline;
    > color: #000000;
    > }
    > a:visited {color:#666666; text-decoration:underline;}
    >
    > a:hover {color:#ff9c04; text-decoration:underline;}
    >
    >
    > /*layout divs*/
    >
    > #wrapper {width: 820px; position:relative; margin:0
    auto; top:15%}
    >
    > #header {clear:both; height:50px; width:820px}
    >
    > #leftcol {
    > width: 108px;
    > float:left;
    > padding-right:12px;
    > text-align: right;
    > }
    >
    > #container {margin:0; padding:0; float:right;
    width:695px}
    >
    > #content {background-color:#FFFFFF; width: 328px;
    padding: 0 10px 0 10px;
    > height: 500px; float:left; color: #666666; font-size:
    14px; overflow:
    hidden;}
    >
    > #rightcol {width: 347px; float:right}
    >
    > #footer {clear: both}
    >
    > #text {padding: 0 10px 10px 0; height: 370px;
    overflow:auto}
    >
    >
    > /*menu*/
    >
    > #leftcol ul {}
    > #leftcol li {
    > font-family:Verdana, Arial, Helvetica, sans-serif;
    > font-size: 11px;
    > color: #FFFFFF;
    > list-style:none;
    > }
    >
    > .logo {
    > margin-right: 0px;
    > margin-left: 0px;
    > padding: 23px 0px 12px 0;}
    >
    >
    > /*design elements*/
    >
    > .scroll {
    > scrollbar-face-color: #ffffff;
    > scrollbar-shadow-color: #C2A2DA;
    > scrollbar-highlight-color: #C2A2DA ;
    > scrollbar-3dlight-color: #ffffff;
    > scrollbar-darkshadow-color:#ffffff;
    > scrollbar-track-color:#FFFFFF;
    > scrollbar-arrow-color:#C2A2DA}
    >
    >

  • Show CSS comments in CSS Style list?

    Hi,
    I've been using Dreamweaver for a numbef of years, but one small feature is forcing me to move away to newer CSS editors. "I need the CSS Style list to show comments from my style sheet". Is this possible?
    Put simply, some of my CSS stylesheets are huge, and I organise them by having comments to separate out the various types of selectors.
    In order for me to navigate my styles, it would help me immensely if the CSS Style list also included comments, so I could quickly see which section was which.
    Is this something which I've missed?
    Thanks,
    Chris.l

    Hello,
    I believe I've had a similar problem over the last day or so (wasted 3 hours).
    I create a "standard" page with all my basic stuff in it.
    Then create two sections with comments like this:
    <!--------------------- Start variable <style> definitions------------------------------>
    <!---------------------Endvariable <style> definitions-------------------------------->
    <!--------------------- Start variable code------------------------------>
    <!---------------------Endvariable code-------------------------------->
    So this way, I can just go quickly to that section of the <header> or <body> and copy and paste code.
    (I'm not at the level of templates yet)
    After three hours of trying to get a table to work, and comparing it to other stuff I've written
    I said to myself "I wonder if comments are allowed in the <style> section".
    The comments were deleted and everything worked fine.
    Based on the above posts, I'm guessing that is a known feature?
    Is it correct that comments can be put in the <head> section, but not in the <head><style> section?
    Again, I thank you in advance.

  • Background nav image not displaying in some browsers...

    Hi,
       I'm in the process of building a website template - still ironing out some bugs, but just discovered that the bacground image in my navigation bar isn't displaying on some browsers (including some versions of IE). It works in IE8 where my primary testing takes place (on both my local drive and from the temporary "live" server, but in most other browsers, doesn't show up...
    below is a link to my test page:
    http://home.roadrunner.com/~jgigandet/trinity/
    and here is the css with the applicable code in red:
    /*Menu Outer Wrapper*/
    .p7PMMh04 {
    width: auto;
    height: 20px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    background-image: url(img/new_bk.gif);
    background-repeat: repeat-x;
    background-color: #000;
    text-align: left;
    line-height: normal;
    /*Hide Sub-Menu in Design View
    Compensate for LI padding on Sliding Doors themes*/
    .p7PMMh04 ul div {
    display: none;
    TOP LEVEL MENU
    .p7PMMh04 ul {
    margin: 0;
    padding: 0;
    .p7PMMh04 li {
    list-style-type: none;
    float: left;
    width: 120px;
    /* Hide from IE5 Mac \*/
    .p7PMMh04 li {
    width: auto;
    /*Top Level Links*/
    .p7PMMh04 a {
    display: block;
    text-decoration: none;
    padding: 2px 14px 3px 14px !important;
    color: #ffc42a !important;
    /*border-right: 1px solid #8184e6;  */
    text-align: left;
    /*Link hover when no drop down is present */
    .p7PMMh04 a:hover {
    color: #df8f04 !important;
    /*background-color: #DFDFDF;*/
    Syntax for special classes programatically assigned to first and last links and also LIs
    See user guide for more information
    .p7PMMh04 ul a.pmmfirst {
    border-left: 1px solid #df8f04;
    .p7PMMh04 ul ul a.pmmfirst {
    border-left: 0;
    .p7PMMh04 ul a.pmmlast {
    .p7PMMh04 ul li.pmmfirst {
    .p7PMMh04 ul li.pmmlast {
    /*First Sub Level*/
    .p7PMMh04 ul ul {
    z-index: 10000;
    background-color: #333;
    width: 150px;
    background-image: url(img/pmm_carbon_subs.jpg);
    background-repeat: repeat-x;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    .p7PMMh04 ul ul li {
    float: none;
    background-color: #000;
    background-image: none;
    .p7PMMh04 ul ul a {
    padding: 4px 12px !important;
    color: #ffc42a !important;
    border-right: 0;
    text-align: left;
    overflow: hidden;
    /* rollover on 1st level rollovers  */
    .p7PMMh04 ul ul a:hover {
    background-color: #333; !important; 
    color: #df8f04 !important;
    /*Third Level (Flyouts in horizontal menu)*/
    .p7PMMh04 ul ul ul {
    border-top: 1px solid #df8f04;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #df8f04;
    SPECIAL IMAGE-BASED RULES
    .p7PMMh04 img {
    border: 0;
    .p7PMMh04 .p7PMM_img {
    padding: 0px;
    border: 0;
    background-image: none;
    background-color: transparent;
    TRIGGERS and CUURENT MARK RULES
    The Closed state relates to trigger items when their child menus are not showing
    The Open state relates to trigger items when their child menus are showing
    Selectors appended with _left Automatically change arrow position and orientation
    if sub levels are set to fly out to the left
    /*Sub Level*/
    .p7PMMh04 ul a.trig_closed, .p7PMMh04 ul a.trig_closed_left {
    background-image: url(img/pmm_south_medium.png);
    background-repeat: no-repeat;
    background-position: right center;
    .p7PMMh04 ul a.trig_closed_up {
    background-image: url(img/pmm_north_medium.gif);
    background-repeat: no-repeat;
    background-position: right center;
    .p7PMMh04 ul a.trig_open, .p7PMMh04 ul a.trig_open_up {
    color: #000 !important;
    background-color: #DFDFDF !important;   /* This is background color of main dropdown rollover */
    .p7PMMh04 ul ul a.trig_closed {
    background-image: url(img/pmm_east_dark.png);
    background-repeat: no-repeat;
    background-position: right center;
    .p7PMMh04 ul ul a.trig_closed_left {
    background-image: url(img/pmm_west_dark.gif);
    background-repeat: no-repeat;
    background-position: left center;
    .p7PMMh04 ul ul a.trig_open {
    color: #FFF !important;
    background-color: #424242 !important;
    /*The Current Marker (You are here) links*/
    .p7PMMh04 .current_mark {
    font-weight: bold;
    color: #60c3d1 !important;
    .p7PMMh04 ul ul .current_mark {
    color: #FFF !important;
    Utility Rule used for Clearing floats in Horizontal Menus
    .p7pmmclearfloat {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    Thanks in advance for any advice,
    Jesse

    You have applied a height of "auto"to your menubar container, which gives it no height at all in some browsers. If you have a clue what height you would like to display for your menubar, give it, instead of:
        <div style="height: auto;" id="p7PMM_1" class="p7PMMh04">
    Better yet, leave it in the CSS file, where you will find it when you go looking for it. You already assign a height there:
    .p7PMMh04 {
        width: auto;
        height: 20px;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        background-image: url(http://home.roadrunner.com/~jgigandet/trinity/img/new_bk.gif);
        background-repeat: repeat-x;
        background-color: #000;
        text-align: left;
        line-height: normal;
    Because your inline style of height:auto; has more proximity (is closer) to the element being styled, it overrides the style in the stylesheet and applies the height: auto; instead of allowing the height: 20px;
    Beth

  • DW designed site, some browsers are dropping images and doing other wonky things, suggestions?

    Hello, we have a small website and on the contact page there are hyperlinked images for facebook and linkedin. On some browsers or computers the images and links are being dropped entirely, including my own when I run Firefox but shows up fine in IE. On one computer instead of left aligning it was center aligned. Here is the page in question:
    Vote Russ Tierney for State Representative
    (Aside from the CSS doing away with tables which is a subject I still need to read up on) is there anything bad about that particular segment of html:
    <tr>
       <td colspan="2">Find me on:<br /><a href="https://www.facebook.com/voterusstierney"><img src="images/Facebook.png"  alt="Facebook" width="47"/></a> <a href="https://www.linkedin.com/pub/russ-tierney/34/49/920"><img src="images/LinkedIN.png" alt="Linkedin"/></a></td>
       </tr>
    Suggestions?

    Aaron Hartley wrote:
    (Aside from the CSS doing away with tables which is a subject I still need to read up on) is there anything bad about that particular segment of html:
    Possibly.
    Servers are case sensitive, so a link to images/LinkedIN.png will not be directed to a file called linkedin.png on the server. Your local OS won't have an issue with it, but the server generally will view that as a separate file from the mixed case version.
    You may want to go through and normalize your file names from within DW's Files window and keep them all as lower case alpha-numeric names. Don't use special characters or spaces in the names either. Instead of spaces, use underscores or hyphens. When you change the names from within the Files window, DW will update all of your links for you.
    Since you're seeing issues in some but not all browsers, I'm guessing the above probably isn't the problem (still worth mentioning though). It almost sounds to me like you are caching older versions in some of those browsers. Try clearing the browser cache to see if that clears up the issue.
    Also, run your pages through the validator at http://validator.w3.org to get a list of html errors in your page. HTML errors can cause all kinds of funky behavior between browsers/versions. If it's still happening once you have your code cleaned up, post back and we can take a closer look.

Maybe you are looking for

  • How do I move my itunes library to a new computer

    how do I move my itunes library to a new computer I now have a HP with Windows 8 and need to move my itunes library from my Lenovo..

  • Read only rows in input-ready query ?

    Hi experts, I would appreciate your advice on the following issue: I have built an input ready querry with structures both in the rows and columns area. The aim is to make some of the rows read only. I have tried to set the elements that I only need

  • Ever since  photoshop CC 2014 came out I can't run it.

    I'm using a pc with windows 7, lightroom and photoshop I get a message from window that says "Adobe Photoshop CC 2014 has stopped working" then it shuts down. This happens when I choose edit in Lightroom and when I try to launch Photoshop directly. I

  • Purchase Orders for special/controlled items

    Hello everyone: I'm trying to create an aproval process for Purchase Orders that include special items that: - we only buy when one of our customers needs them (non-stock items), - have had no activity for 60 days or more, - and/or items that don't h

  • Billing header pricing condition value

    Hi, I have requirment to display billing header pricing condition value. I have check using  first go to Vbrk then find Knumv field,go to KONV and find all condition record value. But in KONV there are only Items condition record SO how to find heade