- Strength to Increase Rep
- +0
- Strength to Decrease Rep
- -0
- Upvotes Received
- 11
- Posts with Upvotes
- 9
- Upvoting Members
- 11
- Downvotes Received
- 0
- Posts with Downvotes
- 0
- Downvoting Members
- 0
39 Posted Topics
 | You can define it as table-caption, though you'll want to consider how this effects users with browsers that don't support display: table ([URL="http://caniuse.com/#search=table"]http://caniuse.com/#search=table[/URL]). [CODE] <!DOCTYPE HTML> <html> <head> <title>Table with DIV and CSS</title> <style type="text/css"> #table { display: table; } .caption { display: table-caption; padding: 0.5em; border: 1px solid #000; … |
| | As a real quick solution, you could get rid of your leftbar/rightbar divs, and instead cut an image that spans the full width of your #wrapper div, and set it to repeat-y. |
| | Unfortunately, there is no single answer, as it will vary heavily by any number of reasons; for example, even with a given monitor size, the user may not have their browser window maximized; additionally, you have to account for browser chrome, bookmark toolbars, scrollbars, utilities running in the browser, etc. … |
| | Found a cool tool that I've been using lately; makes this process super simple: [url]http://www.colorzilla.com/gradient-editor/[/url] |
| | This is a hugely open ended post - if you have something specific you'd like to ask, that would be best. |
| | This page ([URL="http://blog.themeforest.net/tutorials/vertical-centering-with-css/"]http://blog.themeforest.net/tutorials/vertical-centering-with-css/[/URL]) provides some good input on the subject. |
| | Re: CSS image sizing What you want here is height: auto; - also, you should note that max-width isn't properly supported in IE6 (though, you may not care about IE6). |
| | Re: a 100% width div Every browser has it's own default styling applied to HTML rendering. In this case, you're seeing that the body has a margin applied (which is really common). You can combat this by setting (in your css file): [CODE] body { margin: 0; } [/CODE] Many people are using browser "reset" … |
| | There are two real easy ways you can do this; utilizing CSS: [CODE] ol { list-style-type: upper-alpha; } [/CODE] Or inline in your HTML (using the CSS method is the more appropriate way however): [CODE] <ol type="A"> <li>foo</li> <li>bar</li> </ol> [/CODE] |
| | Re: Odd Indentation Without being able to see code, we'll not be much help. As a guess however, the offset looks suspiciously like it's clearing your navigation; you may want to look into that a bit (or let us see the code). |
 | Re: string variable I'm not aware of support for this outside of scripting, with the emerging exceptions of certain things in HTML5 (like client side storage). I presume the CSS spec may one day evolve to support things like mixins, but we'll have to wait awhile for those things to be well defined, … |
| | I'm not quite sure I understand your issue; I've attached a screenshot of your code as rendered in Firefox, and I'm not seeing a "center box of the second row", and I'm not sure what "high" means in reference to that. Could you please provide a bit more detail, including … |
 | Agree we need more detail about what your issue is. I attached a screen (from FF) of your identical code (I included your css within the html document inside <style>). Seems like it applies as you'd generally expect. Perhaps your link path to a .css file is wrong? We're just … |
| | Yes, please provide a link to your page, or post your HTML code as well - CSS alone isn't enough to diagnose. That said, I agree with teedoff that floats may be a better approach. |
| | Wanted to share this with the group (though it may not be news for you all); this morning I ran into an issue I didn't even consider possible until now. We found that a particular .jpg image would render in FF, Chrome, etc, but NOT in IE. As it turns … |
| | You could change your css to something like the below: [CODE] #parent { overflow-y: scroll; width: 100%; } #box1 { width: 15%; float: left; } #box2 { width: 80%; float: right; } [/CODE] I think this achieves what you're asking. |
| | It's difficult to diagnose here without the other, supporting code (primarily your CSS). My guess is that you just need to position your MenuBarItemSubmenu, or define z-index. Still, we need to see more code here to help properly. |
| | Well, you're asking a bit of a loaded question here. On one hand, HTML5 date picker implementation is really easy: [CODE] <input type="date" name="user_date" /> [/CODE] But, most browsers have no idea how to interpret that (they essentially treat it like text). If you happen to be viewing an input … |
| | 1) In general, I try and and use the cascade where possible; for example: [CODE] h1, h2 { font-size: 14px; color: blue; } h2 { color: green; } [/CODE] 2) You should use class names that are semantic to function or content vs. something like color. In other words, I'd … |
| | Re: Web Design Agree with pixelsoul - I'd suggest using CSS3 to achieve this effect in browsers that support it. Given that something like a box shadow is non-essential to site usability, there is little risk to not supporting box shadow in these older browsers. That being said, if you DO want to, … |
| | Re: z-index Relatively positioned elements still retain their natural place in the page flow, so are supposed to behave in the way (I think) you're describing. z-index in this case isn't your issue, I think what you may want instead is to set position to absolute, effectively removing your layer div from … |
| | Your site is currently centered (at least in FF); does this mean you're good to go? |
| | [QUOTE=ryy705;1228025]Does "-moz-border-radius" predate "border-radius" ? Is that what's going on?[/QUOTE] Yes, exactly. Until the specification is finalized, the browser engines don't want to officially support a given feature (because they're trying to hit a potentially moving target). This is why they prefix.  |
| | There definitely are not "standards" per se, but targeting your users by understanding their screen resolutions is the best place to start as MJ080 points out; 1024px width would be a good starting point. That said, your design needs to consider variability in how the browser is fit within the … |
| | What do you mean by width "100%"? Do you mean you want the image to extend to the edges of the browser window, whatever width the user's screen resolution is? |
| | I admittedly am not an expert on image maps - haven't used them in years - but, I'm curious about the inline resizing of the image; it seems likely that this could be your issue - that is, unless the coordinates were based on the resized image, they would be … |
 | I'm not completely sure I understand what you're trying to achieve - could you please clarify what the issue is? |
 | I'm not entirely sure this is feasible given how favicons are referenced. If the server could somehow handle this, you could have some opportunity to manipulate which favicon it serves, but it would also need to send appropriate header stuff to not allow the browser to cache. Additionally, whenever the … |
| | Re: Check my Code Generally speaking, yes. You'll want to define global styles first (like body, anchors, headers, paragraphs, lists, etc), followed by overrides. For example, you're setting font-size: 15px in a bunch of places, when you could get away with doing it once in body, and only setting something different for those elements … |
| | So, you're just trying to include a CSS file if that boolean is true, else include a different file, correct? Depending on what you're programming in, you'll just do something simple (within <head>) like so: <if [yourBoolean] = true> <link rel="stylesheet" href="style1.css" type="text/css" /> <else> <link rel="stylesheet" href="style.css" type="text/css" /> … |
| | I'm not totally sure I'm following your specific issue, but it sounds a whole lot like you need to set overflow: hidden on the containing <div>. Assuming your floated content is flowing outside of the container, this should help you clear that. |
| | I would consider setting an appropriate font size in your body selector instead of all of the individual selectors. You could then override that default font-size as needed. For example, if I remove font-size from all of your existing selectors, and just add font-size: 12px (as an example) to body, … |
| | You can do this with just HTML + CSS reasonably easily. It would help us a bunch though if you could point us to a website where your page is hosted, or paste in some source code for review. |
| | I think it would be fine as a starting point, but you'll want to extend your learning through updated information. Your biggest issue will be the differences in how browsers render code - Even if HTML and CSS didn't change (which they have to varying degrees), the browser environments have … |
 | Here's what W3 says on the subject: [url]http://validator.w3.org/docs/why.html[/url] Personally, I'm not totally convinced that validating is that big of a deal; it's certainly a good gauge of how your site may perform in a multi browser environment, but if your HTML doesn't validate, and you're happy with the way your … |
| | Re: margin in css As long as the div you're attempting to center has a static width, IE6+ shouldn't have a problem with auto. Perhaps if you provided a URL, or code snippets, we'd be able to better help you.  |
| | It would definitely help others to see a full page code, including CSS, etc. for accurate triage. Certainly something like the following may work (note "body" and ".body" in your case are synonymous, and seems redundant): [code=css] body { font-weight: normal; } [/code] However, the above may not be enough … |
| | Try floating #content left, that should do the trick: [code=css] #content { float: left; } [/code] |
| | I'm not totally clear on the issue, but I suspect you are expecting the modified background color to affect the entire wrap container; if that's the case, I would add overflow: hidden; to your #wrap selector: [code=css] #wrap { overflow: hidden; } [/code] I also noticed that the first line … |
The End.