Preview looks different than on...

User 2110247 Photo


Registered User
6 posts

I am building a site but my menu has spaces in it in preview that are not in the webpage when viewed in my browser. The CSS that controls the navigation division is as follows:
#navigation {
position: absolute;
top: 130px;
left: 0;
width: 134px;
color: #000000;
height: 600px;
}

#navigation ul {
margin: 0 0 1em 0;
padding: 0;
list-style: none;
text-color:#FFFFFF;

}

#navigation ul a {
color: #000000;
text-decoration: none;
display: block;
background: #00A062;
padding: 0 0.5em;
margin: 0 1em 1px 1em;
}

#navigation a:visited {
color: #FFFFFF;
}

#navigation a:hover {
background: #FF000F;
}


The webpage which has the menu in it looks like this:
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="departments_main.html">Departments</a></li>
<li><a href="index.html">Specials</a></li>
<li><a href="index.html">Recipes</a></li>
<li><a href="index.html">Healthy Eating</a></li>
<li><a href="contact_main.html">Contact Us</a></li>
</ul>
</div>


In my browser it shows up like this:

Home
Departments
Specials
Recipes
Healthy Eating
Contact


While in preview it shows up like this:
Departments

Specials

Recipes

Healthy Eating

Contact

I am wondering why this is occuring
User 187934 Photo


Senior Advisor
20,271 posts

I tested your code and it previews and looks the exact same for me testing on local machine and live webpage.:) Do you have the latest version of the html editor if that's what your using?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

In the newest HTML Editor you can specify which IE Version you want to have for preview. The options are IE7, 8 and 9. Check the settings.

Also, you didn't say which browser you are using. The various browsers always add some margins/paddings of their own, so you'll have to include a reset rule in your css file.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 38401 Photo


Senior Advisor
10,951 posts

I have been playing around with the newest version of HTML Editor the past few days, but I do have a question about that preview browser, do you have to have the one you choose installed? Or does it render it on it's own even if the version you have installed is 9 and you choose 7 to preview it in? Just curious because I have no idea how to install multiple versions of IE or any other browser for that matter. :)
User 187934 Photo


Senior Advisor
20,271 posts

JoAnn this will answer your question. I think.:)
http://www.coffeecup.com/help/articles/internal-preview-uses
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.