|
CSS - Some Tips (font Sizes Amongst Browser) + Float
PHP Code:
#searchBox { float:right; margin:0em; padding:0em; margin-right:0.2em; clear:right; background-image:url(/images/site/backgrounds/searchBox.jpg); /*border:black solid 1px;*/ } #searchBox input { margin:0em; padding:0em; background-color:#d2c5a2; } .submit { background-color:#6F5F42;; color:#483e2b; font-size:smaller; font-weight:bold; margin:0em; padding:0em; } and html PHP Code: <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;"> <label>What are you shopping for?</label><input type="text" name="search" size="14"/> <input class="submit" type="submit" name="submit" value="Search" /> </fieldset> </form> </div> i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!! also is there anyway to make sure that the font sizes are same/similar in both IE and FF? http://www.zahra-zahra.com/fullpage.html EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box.. Similar TutorialsI'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes How would I fix this problem so that the font renders the same size? Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as? This is an old subject, and sore spot with everyone, I know. But I like to do a "check-up" from time to time, to see if there are better ways to do this .... When implementing a tight design, where I cannot afford much deviation in font size from the original design, I find the differences in browsers/versions/OS to be... well... rediculous. Some time ago I went about normalizing this by specifying font sizes in CSS with the em specification. i.e. font-family: serif; font-size: 0.6em; I then have a piece of javascript included in every page that detects the OS, OS version, browser and browser version.... and writes the CSS <LINK REL=stylesheet statement to use a particular CSS file. I started out with three CSS files: Mac, Windows MSIE7 and Windows MSIE6. Now, expecially with Vista, I'm up to 7 different CSS files in all. This controls fonts very well. And it's not really that much trouble, since you just create the first CSS as you design, then copy that to the other 6 files, and just make font size adjustments. HOWEVER - is this sane? Is there a better way? (keep in mind that our designs require tight control.) Any thoughts much appreciated. Hi All I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari. I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received. Font size is fine FF3.5 and IE8 Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs. Hoping someone can help John I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes? many thanks. dan I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size. A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything. So first question -- am I right about !important? It's only about user and author stylesheets, yes? Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right? Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."? Hi there, I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work. How can I center them vertically? Thanks! Hi, If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6? I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger) Many thanks! Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin Hi, I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox. Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't. My question is would I be better developing separate CSS files for each browser type and use a script to determine which one? If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful. Regards Paul I need the video on my site to stretch and contract to the screen size or as small as a cell phone screen and show my whole site smaller. I'm always going to use this header on all the pages on all my sites. I'll either have a photo, video, background image or rss feed underneath. Like google web search engine has but with the same header. I just need everything on the whole page to always resize... streachable video i'm talking about that does this... youtube.com/v/vr3x_RRJdd4 Here's my site I can't get to work... crossroads.site50.net putting a v in the video link doesn't work... on my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! Hi, Suppose I define a font-family with several fallbacks, for example: Code: font-family: "Georgia", "Liberation Serif", serif; Now I would like to know which font did the browser effectively pick without me having to go through my system looking for which fonts are installed. When I inspect the text with tools such as Firebug or the Web Developer Toolbar, they just give me the full font-family definition, but don't tell me the actual font being used... Thank you in advance! Jean In my web docs, in FF, the text size can be adjusted in the browser, but not in IE. Why would this be? I'm using points to define font size by the way. I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox. Not sure the best way to solve this? Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which? Thanks Hi, I'm trying to redesign my website to be CSS and XHTML compliant. While I've managed it and everything is almost perfect, IE has one very minor glitch. The page is http://hiveworldterra.ibboard.co.uk/HWTv2.html My 3-col design is based on (and modified from) a 3 col layout I found on the net (there is a credit in the CSS of the page).IE displays everything perfectly and even resizes horizontally without a problem, but as soon as you try to resize vertically, the left column will often overlay the center column. Refreshing the page without resizing the window fixes it and resizing the page horizontally fixes it. As per usual, Firefox is perfectly fine, no matter how you resize the page (until you get down to rediculously small, at which point its to be expected!) It doesn't seem to be a width issue, as I've got a 1280x1024 monitor at work and at full width on one monitor or down at 500px wide there are only a handful of vertical sizes where the left column doesn't overlap, but every time it does overlap then if you resize horizontally by a single pixel then it fixes itself. Anyone have any ideas or IE only hacks (preferably neat ones!) to stop this minorly annoying behaviour? From problems I had while modifying the original layout, it almost seems as if IE is losing the float on the left column. Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) I want to know.. how can i make a css scrtip that will work on IE and firefox.. because sometimes i make one.. looks good in F/F but not in IE Hey, I'm making a new style for my wii fansite but the style I've got so far looks very boxy. http://www.wii4friends.com/v2/ I was wondering if anybody had any tips and making the page more seamless and less boxy I planned on making the box head title not so high. I also find the rightside looking a bit dull |
|||||||