Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Nov 11, 2010 10:57 PM by RandomlyKnighted
Nov 08, 2010 06:15 PM|LINK
Hey everyone, I have 3 buttons that are in a div and with my current CSS I am unable to move the buttons. It just changes the div. At the moment, this is my code:
That is my CSS for the first div. I know that with a link you can do div.link a and it selects that link and lets make changes to it such as adding padding, margins, etc. Is there a way to select a button?
By the way, I am running Visual Studio 2010.
Visual Studio 2010
Nov 08, 2010 06:44 PM|LINK
Difficult to say without seeing the rest of the code. Can you post the code for the div and the buttons and optionally other CSS or HTML that may influence this?
Nov 08, 2010 06:59 PM|LINK
Sure, here you go:
<div id="SelectWeek" class="SelectWeek">
<asp:Button ID="Button1" runat="server" Text="Unit 1"
CssClass="FirstThreeWeeks" onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Week 2"
<asp:Button ID="Button3" runat="server" Text="Unit 2"
CssClass="FirstThreeWeeks" onclick="Button3_Click" />
<asp:Button ID="Button4" runat="server" Text="Unit 3" onclick="Button4_Click" />
<asp:Button ID="Button5" runat="server" Text="Unit 4"
CssClass="SecondTwoWeeks" onclick="Button5_Click" />
<asp:Button ID="Button6" runat="server" Text="Week 6" />
That is the code for my divs. Here is my CSS:
Nov 08, 2010 07:06 PM|LINK
You can use # with the buttin ID like:
/* your styles */
But, I would remove the CssClass assignment for the button.
Nov 08, 2010 08:25 PM|LINK
The code div.FirstThreeWeeks refers to <div /> element with a class called FirstThreeWeeks. In your case, however that class is not applied to the <div /> but to the button. In addition, you're not using a class attribute on the div, but an
id. You can do what Richard suggested and use #Button1 to refer to a button with a client side ID of Button1. Alternatively, you can use:
which refers to all elements with a class called FirstThreeWeeks (using the .) inside a <div /> element with an
id of FirstThreeWeeks (using the #).
Or you can address all input elements like this:
BTW, I wouldn't mix element ids and class names as you've done now with FirstThreeWeeks. While it works, it can really cause a lot of confusion.
Nov 08, 2010 09:43 PM|LINK
I followed Richard's advice and my buttons began to move like I want them within Visual Studio. The problem I'm having now is I get my buttons where I want them in Visual Studio but then when I run the application they are all on the left side of the browser.
It's like I didn't even do anything at all.
Nov 09, 2010 06:50 AM|LINK
There could be a few reasons for that:
1. The browser is using a cached CSS file. Try Ctrl+F5 or Ctrl+R to force a hard refresh of all the files in the browser..
2. Other CSS is influencing the layout
3. You're using non standard or invalid CSS which isn't interpreted by the browser correctly.
Is there an on-line URL we can take a look at?
Nov 09, 2010 07:55 AM|LINK
In addition to the issues that Imar mentioned, your issue may be that different browsers (and different versions of the same browser) will interpret css differently.
Are you using the same version of the same browser to view the page in VS and in production?
Is the appearance the same in all major browsers or does the page appear as you want in some but not all browsers? If this is the case, which is which?
Post the styles that are not working for you.
Nov 09, 2010 08:32 AM|LINK
i might be wrong im no expert here
but i would but your buttons with another div......
and your div in a WRAP" div...a div of your whole page
Nov 09, 2010 05:51 PM|LINK
When I said I was viewing it in Visual Studio I was referring to the designer. In the designer tab, everything shows up like it should but when I run it the solution it brings it up in Internet Explorer and all the buttons are aligned left.
I tried the Ctrl + F5 and the Ctrl + R but neither one worked.
No I do not have a way for you to view it at the moment. I'm working on that and hope to have it up for you to view within the next hour.