My CSS doesn't work

Hi

I'm new to this whole web game. I am serving my first ever site with discountASP as of a week ago. The thing is, there is this particular part of my CSS that isn't working.
It works on my server inside VS2010 but not on the discountASP server.
I am pretty sure that the files are synchronised.

I will go back and check this again now.
Does anyone have any ideas?

david.

 

Hi,
There are many sides to this.
i.e. If served from an ASP.NET Master page
If that's the case, there's a section in the official ASP.NET forums just for that sort of thing. ;-)
http://forums.asp.net/p/1099636/1668434.aspx#1668434
All the best,
Mark

 

No, I checked. what I did was rename my local css file, and then I copied the remote css file back over and then opened it and it definitely has the css in it that I want to use.
What would be an appropriate way to check that the CSS files are synchronised? What I did, or is there a better way?

#q1
{
position: relative;
}

#cpMC_MarkQ1
{
position: absolute;
top: 55px;
left:-20px;
}

#q2
{
position: relative;
}

#cpMC_MarkQ2
{
position: absolute;
top: 35px;
left:-20px;
}

I think the q1 and q2 are working. I made them use positioning, just by declaring the the positioning they use. Otherwise the children of each #cpMC_MarkQ1 and #cpMC_MarkQ2
wouldn't position.
Anyway I thought maybe because control id get's renamed in asp that it was that, but I just tried this:

#q1
{
position: relative;
}

/*#cpMC_MarkQ1*/
.Q1
{
position: absolute;
top: 55px;
left:-20px;
}

#q2
{
position: relative;
}

/*#cpMC_MarkQ2*/
.Q2
{
position: absolute;
top: 35px;
left:-20px;
}

and it works on my computer, but not on the discountASP server.
Does anyone have any clues now?

 

yes it is....

Yes it is served from a master page.
Let me check that link out.

 

I suggest you develop against and debug locally with IIS. Never (and I really mean never) use the VS integrated web server because it's not a valid test platform when you will ultimately target a real IIS server for production/live.

Even better if possible, use the same version of IIS in your dev environment that you will target for live. I know this isn't always possible but it's the ideal setup if you can get it.

 

yeah I will look into this.
Well i'm not sure that posting helped me. As all of my css works except for these two id/classes. I tried using just an <img> tag making them runat="true" and setting the .Src instead of the .ImageUrl property, and once again trying CSS class and Id but this didn't work on my site at all. This may well be a clue.
here is the server side code. MarkQOne works fine on local using the <asp:Image> tag, while MarkQTwo doesn't work on local using <img> tag.

If this code gives you any hints, then great. Meanwhile I will look into this IIS thing.

David.

//Mark question one
private void MarkQOne()
{

//If they answered correct, tick it.
if (Q1RButList.SelectedIndex == 2)
{
MarkQ1.ImageUrl = "~/App_Themes/Pristine/Images/Quiz/Tick.jpg";
MarkQ1.Visible = true;
}
else //if not, then cross it.
{
MarkQ1.ImageUrl = "~/App_Themes/Pristine/Images/Quiz/Cross.jpg";
MarkQ1.Visible = true;
}
Q1RButList.Enabled = false; //Disable the radiobuttonlist so they can't play with it.
}

//Mark question two
private void MarkQTwo()
{
//If they answered correct, tick it.
if (Q2RButList.SelectedIndex == 1)
{
MarkQ2.Src = "~/App_Themes/Pristine/Images/Quiz/Tick.jpg";
MarkQ2.Visible = true;
}
else //if not, then cross it.
{
MarkQ2.Src = "~/App_Themes/Pristine/Images/Quiz/Cross.jpg";
MarkQ2.Visible = true;
}
Q2RButList.Enabled = false; //Disable the radiobuttonlist so they can't play with it.
}

 

Whoa!! Hold the phone.
That second method actually did work. I just made an error in my css file.
Let me go and look into configuring this IIS and see if it works on a real server.

david.
PS: If anyone know of any good instructions on how to configure this, it would be greatly appreciated.

 

OK, IIS is installed and I'm having the same problem as on the discountASP server.
It's working in VS2010 but not on IIS.
I think i will read that post again.... or go to bed.

 

Found the source

Hey, I looked at the source being served.
These masterpages change the name and id of the controls when you use a ContentPlaceHolder control.
It will actually prefixe your control id with the id of the ContentPlaceHolder control.
for example, if you have an <asp:image id="Image1" .... />
and an <asp:ContentPlaceHolder ID="cp" ... />
Then in the served source the result is <img id="cp_Image1" ... />
It actually joins them together. This is what is served from the VS2010 server and I was aware of this. This is why I had CSS rules like this:

#cpMC_MarkQ1
{
position: absolute;
top: 55px;
left:-20px;
}

because my ContentPlaceHolder id was "cpMC" and my <asp:ListItem> id was MarkQ1.

What I didn't know was that when you serve it from IIS, it actually prepends something else. The auto-generated id of the master "ct100"
So the final id from discountASP or my IIS server was "ct100_cpMC_MarkQ1"
I didn't take this into account in the CSS using id. I changed over and used CssClass to set the class and I used class instead of id in the CSS file.

Thanks for your responses.
David.

 

...Keep us updated, CSS is much harder in ASP.NET than in most other page types.
All the best,
Mark