hi guys,

I'm having a strange problem. i designed a site using Dreamweaver and tested it on firefox and IE until i got it consistent and looking right in both. then i copied the CSS and HTML into a master page and style sheet in my Web Developer project.

when i run the site from here it opens in an IE browser. the layout of the site is slightly different from when i tested it through IE outside of the .net environment. the same result occurs if i test it using the Firefox browser!! any idea as to why this might be? 

there are two main differences; a image has a blue border around it even with CSS code to completely remove it, and a textfield displays with the incorrect length. below is the code it uses, thanks for any advice:

1    /* the image with showing a border when it shouldn't! */
2    
3    #Logo 
4    {
5    	float: left;
6    	margin-left: 24px;	
7    	width: 207px;
8    	display: inline;
9    	text-decoration: none;
10   	border-style: none;
11   	background: transparent;
12   }
13   
14   #LogoImg
15   {
16   	border-style: none;
17   	background: transparent;
18   }
19   
20   #Logo a:hover
21   {
22   	border: none;
23   	background: url("images/jump.gif") top left repeat-x; 
24   	text-decoration: none;
25   	background: transparent;
26   }
27   
28   /* the incorrect sized text box */
29   
30   #search
31   {	
32   	position: absolute;
33   	text-align: center;
34   	width: 120px;
35   	padding: 10px 5px 5px 5px;
36   	background-color: #10C8CD;
37   	right: 40px;
38   	top: 0;
39   }
40   
41   #searchContents
42   {
43   	/*float:<span class='val'> center</span>;*/
44   	position: relative;
45   	margin: 0;
46   	padding: 0;
47   }
48   
49   #searchContents input.searchbox
50   {
51   	background: url('images/search.gif') center left no-repeat #FFF;
52   	height: 16px;
53   	width: 100px;
54   	padding: 1px 4px 2px 16px;
55   	margin: 5px 10px 5px 10px;
56   	font-size: 11px;
57   	float: left;
58   	border: solid 1px #7E1325;
59   }

Compare the source html between both the VWD and the DW pages.  You may find that VWD has applied some arbitrary style somewhere that you didn't want.  Then try again by downloading the Orcas edition of VWD which purports to offer much better CSS support. 

 This happens a lot when porting over CSS-styled  HTML markup to ASP.NET, especially when using IDs as CSS selectors (which, as you probably already know, is the "proper" way of doing it).

It has to do with how ASP.NET renames server control IDs that are inside other server controls...

Check your source, and see if where you expect to see ID="Logo" , you see ID="ctl00_Logo" or something like that instead. That would happen if your element with ID="Logo" is inside another control that uses runat="server".

If this happens, your CSS won't work, because it never finds an element with ID="Logo" .

What you have to do to solve this is to:

a) use class selectors instead (bad idea, in my opinion)

b) rename the selector in the CSS stylesheet to ctl00_Logo, or whatever the name in the source is that you are targeting. If you do this, keep in mind that if you end up redesigning the page and creating more server control containers, you may have to adjust your CSS again.

thanks for your advice guys, sorry about the late reply, i only got back to it now. i checked the IDs for any auto generated names and nothing. all the names are correct! i also compared the two source pages and there is no difference. i cannot the Oracs edition of VWD as my work wont let me :(

any ideas on how to remove the blue border around my image? ive tried everything, border: 0; border-style: none; etc. it just doesnt seem to read anything about the border?!!

very puzzled

If the image is a link, then try adding this:

a img {border:none;} 

 Maybe it's surrounded by an <a> tag?

If so, you'll need to apply style to a img. Any image inside an <a></a> would render a blue border by default unless you get rid of it. 

LOL, i was just replying to say i fixed it when i got your reply Mike! even though i had given the image the following style

#LogoImg
{
border-style: none;
background: transparent;
}

it was not been picked up. instead i had to specify that the DIV containing the logo had the following properties:

#LastLogo img
{
    border: none;
    border-width: 0;
}

thanks for your help!