473,809 Members | 2,758 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Setting a <Span> Width to 100%

74 New Member
Hi there!

I'm having a problem with a <span> element's width.
I have a span element within a div block:
Expand|Select|Wrap|Line Numbers
  1. <div class="picker">
  2.      <span id="ctl00_cph_mainContent_TPKR_Tues_LBL_TitleForPicker" class="pickerTitle">Tuesday</span>
  3. ...
  4. </div>
  5.  
Despite all of my efforts I cannot get this <span> to be 100% width of the <div> block in Firefox.

The CSS I'm using is:
Expand|Select|Wrap|Line Numbers
  1. .picker
  2. {    height:auto;
  3.     width:67px;
  4.     border:solid 1px Black;
  5.     text-align:center;
  6.     position:static;
  7. }
  8. .pickerTitle
  9. {    height:auto;
  10.     border-bottom:solid 1px Black;
  11.     text-align:center;
  12.     font-weight:bold;
  13.     background-color:#EE9A00;
  14.     width:100%;
  15.     min-width:100%;
  16. }
  17.  

This small detail is driving me insane because it works in IE and Opera but not in Firefox. I've tried everything to get this to work...I've even tried setting the <span>'s width to the same width as the <div> but this didn't work.

If anyone has some insight into why this <span> will not spread out to be the width of the <div> block in Firefox I would be Very Greatful.

Thank you!

-LilOlMe
Jun 1 '07 #1
6 45211
drhowarddrfine
7,435 Recognized Expert Expert
<span> only works on inline content. As you have it inside a <div>, that makes the content block-level. You shouldn't use span to make something 100% width.
Jun 1 '07 #2
lilOlMe
74 New Member
<span> only works on inline content. As you have it inside a <div>, that makes the content block-level. You shouldn't use span to make something 100% width.
What would you suggest then?

I'm working with ASP.NET to develop a website.
I'm setting a Label's CSS according to whether or not its a weekday/weekend/holiday... depending on this property I sets the background colour of the Label to Orange, Light Orange, or Green.

Labels translate into a <span>.

I used to have the label inside a <div> which worked wonderfully...
Except that I can't set a <div>'s CSS class using my Server Side code.
I can only set ASP elements.

Thanks for the information on the "inline" nature of a <span> though. I didn't know that.

Looking forward to hearing your recommendations !

-LilOlMe
Jun 1 '07 #3
lilOlMe
74 New Member
What would you suggest then?

I'm working with ASP.NET to develop a website.
I'm setting a Label's CSS according to whether or not its a weekday/weekend/holiday... depending on this property I sets the background colour of the Label to Orange, Light Orange, or Green.

Labels translate into a <span>.

I used to have the label inside a <div> which worked wonderfully...
Except that I can't set a <div>'s CSS class using my Server Side code.
I can only set ASP elements.

Thanks for the information on the "inline" nature of a <span> though. I didn't know that.

Looking forward to hearing your recommendations !

-LilOlMe

Sorry to put you on the spot.
I thought the problem through a bit more....Panel's translate into <div> elements. I simply put the Label inside the Panel and set the Panel's CSS property Server Side based on the Weekday/Weekend/Holiday property.

Problem's fixed :)

Thanks a lot for your help. Without knowing about <span> I wouldn't have figured this out!

:)
-LilOlMe
Jun 1 '07 #4
jwscuba
1 New Member
I am not sure if this will help but if you add the style property display: inline-block to the span class that might work. If you assign a width to the label usine the visual studio properties (not css class) it inserts that line of code. My understanding is that Firefix has different syntax than inline-block I am not sure if that my help. I wouldn't want to put an extra panel control out there if I didn't have to.
Jun 6 '07 #5
lilOlMe
74 New Member
I am not sure if this will help but if you add the style property display: inline-block to the span class that might work. If you assign a width to the label usine the visual studio properties (not css class) it inserts that line of code. My understanding is that Firefix has different syntax than inline-block I am not sure if that my help. I wouldn't want to put an extra panel control out there if I didn't have to.

Thanks for your reply Jwscuba!

I basically switched the Label for a Localized control and used the panel instead.
I have no idea if your inline-block will work on a span.

-LilOlMe
Jun 6 '07 #6
fellipesousa
1 New Member
hey man... look

define
span {display:table; min-width:100%;widt h:100%;}

or height replace

if asp.net more
form{min-width:100%;widt h:100%;}
Jun 6 '13 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

13
3407
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to <foo/>) From XHTML specification:
4
10442
by: Tristan Miller | last post by:
Greetings. Occasionally I come across sites that use something like the following combination of CSS and HTML: h1 { height:100px; width: 500px; background:url(welcome.gif) no-repeat; }
18
4406
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
9
6848
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from the the span element when I select the whole text in the SPAN and drag it. However, I want to drag it without have to select the words between the span element. The default mouse action will only select the words when i move the mouse. Can...
6
2837
by: hsomob1999 | last post by:
so i have a <ul> and I allow the user to append items to it. The problem is that on mozilla the <span class="line"> which is just a line to divide the sections gets overlaped and doesnt move down and adjust to the newly added items like it does in iE. It just occured to me that i dont really have to use a span, and a html <hr> tag could do the trick -I will go try. But aside from that could some one explain why this occurs? And will I get...
2
2691
by: Ante Perkovic | last post by:
Hi, I noticed that client-side validation (in IE6) is done with <span> tags that have the same attributes as in original aspx code (controlToValidate and others...). I noticed that, when i save generated html as a new document with html extension and open it in Visual Studio.NET, the same VS.NET that created them doesn't recognised those span atributtes (ie.5 shema is used) and marks them with underline! How is it possible that VS.NET...
10
8574
by: fjleon | last post by:
Hi, i am stuck using older ASP and have to dinamically fill a converted-word file as a form. Let´s suppose a row on a table has the name of someone like in a declaration: <span>Some random guy</span>, currently employed at ... The problem is that the location of the next part of the line ("currently employed") varies on the length of the text inside the span.
1
6073
by: rynato | last post by:
I have a <spanof width X px and height Y px. I want to read the text of an article, which is stored in a mySQL table, and pass to that <spanonly just enough text to fit in it, along with a 'read more' hyperlink which will take the user to the full article. I do not want any overflow scroll bars to show. The font-size is set by external stylesheet in em's. How can I determine how much text is enough? Approaches I've thought of:
5
3546
by: Brent | last post by:
Take this small HTML fragment: span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;} ------------------------ <div> <span id="1" class="theClass">&nbsp;<span> <span id="2" class="theClass">Stuff in span<span> <span id="3" class="theClass"><span> </div> ------------------------
0
9721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9601
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10635
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10378
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10115
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5550
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4332
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3861
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3013
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.