Search Results

Search found 11216 results on 449 pages for 'css'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 37/449 | < Previous Page | 33 34 35 36 37 38 39 40 41 42 43 44  | Next Page >

  • IE8 CSS different from IE7 & Firefox

    - by thegunner
    Hi, I'm applying a css style to a select dropdown and input textboxes. The style appears to work in IE7 and Firefox but not in IE8. The css is: input.text, input.file, textarea.textarea, select.select { font-family:"lucida grande",tahoma,verdana,arial,sans-serif; color:#333; margin:0; padding:4px; } input.text, textarea.textarea, select.select{ border-top:1px solid #7c7c7c; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-bottom:1px solid #ddd; } The style appears to apply fine to textboxed but not selects/ Any ideas about why this is happening in IE8?

    Read the article

  • A simple, clean web layout

    - by Shaun_web
    Ok, so I hate CSS/HTML graphic design... What do you guys recommend as a sample template or website that you think has great CSS and html layout? From my past experience it's best to get a page that has a white background and little dependency on graphics -- that's clean, and easy to modify ;-).

    Read the article

  • css to replace characters in paragraph tag

    - by Thariama
    Already checked exisitng questions for this, but didn't find an exact match. My aim is to replace characters (like spaces) on a webpage with a small image using css. Example: <p><span>This is a text</span></p> becomes: <p><span>ThisIMGisIMGaIMGtext</span></p> (where IMG stands for a visible image (middot-pic for a space f.e.)) I cannot think of a suitable css selector. But myabe one of you guys (or girls) know a solution. Is this possible at all?

    Read the article

  • How to modify CSS when requirements change?

    - by DaveDev
    Suppose I'm given the requiremnt to geneate a few pages that have tables on them. The original requirement is for all tables to be 500px. I'd write my CSS as follows: table { width: 500px; } That will apply accross the board for all tables. Now, what if they change the requirment so that some tables are 600px. What's the best way to modify the CSS? Should I give the tables classes so table.SizeOne { width: 500px; } table.SizeTwo { width: 600px; } Or is there a better way for me to deal with changes like this?

    Read the article

  • How to keep a floating div centered on window resize (jQuery/CSS)

    - by Jimbo
    Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized? To help explain, I imagine the pseudocode would look something like: div.left = 50% - (div.width / 2) div.top = 50% - (div.height / 2) UPDATE My query having been answered below, I wanted to post the final outcome of my quest - a jQuery extension method allowing you to center any block element - hope it helps someone else too. jQuery.fn.center = function() { var container = $(window); var top = -this.height() / 2; var left = -this.width() / 2; return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' }); } Usage: $('#mydiv').center();

    Read the article

  • css issue when resize windows

    - by zlippr
    hi i am having issue with css as when i resize the windows the div is not placed properly as below this is css involving the div .similar_story_block_form { background-color: white; border: 1px solid #CCCCCC; border-radius: 0 0 12px 12px; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8); font-size: 13px; left: 337px; position: absolute; top: 105px; width: 337px; z-index: 100; } currently i use chrome which give me the same issue. What am i missing here? Thank for your help

    Read the article

  • Using CSS instead of tables to create a centered column of images

    - by pcampbell
    Consider the task of replacing this table with CSS stylings: <table border="1"> <tr><td align="center"> <img src="foo" /> </td></tr> <tr><td align="center"> <img src="bar" /> </td></tr> <tr><td align="center"> <img src="bat" /> </td></tr> </table> The desired output is 3 images stacked on top of each other. The images are centered on the widest of them all. How would you style this markup with <div> around those <img> tags with CSS to achieve the same look?

    Read the article

  • Hide / show content via CSS:hover (or JS if need be)

    - by Chris
    I have the following html: <li> <span class="one">Stuff here</span> <span class="two">More stuff</span> </li> .one { display: block; } .two { display: none; } What is the easiest method, preferably CSS only, to hide one and show two when the mouse rolls over the <li> container. If this cannot be done via CSS and only Javascript, I would prefer jQuery via something like live() as the content is updated live and do not wish to constantly rebind manually. EDIT: I forgot to mention that this has to work in IE6 :/

    Read the article

  • Replace url() relative path with full domain in css files

    - by deepwell
    I'd like to run a script on release that replaces all url() declarations in a css file with the full domain path, because images are hosted on a static web server. Example Current: background-image: url(/images/menu.gif); Desired: background-image: url(http://example.com/images/menu.gif); Current: background-image: url('/images/menu.gif'); Desired: background-image: url('http://example.com/images/menu.gif'); Current: background-image: url("/images/menu.gif"); Desired: background-image: url("http://example.com/images/menu.gif"); I have concocted a bash script using sed to do just that, but it does not handle url with quotes url(''), or urls that already have a full path. STATIC_HOST="http://example.com" sed -i '' "s|url(\([^)]*\)|url($STATIC_HOST\1|g" main.css

    Read the article

  • css selector on IE

    - by user121196
    I'm using .class1.class2 .class3 selector, works fine in FF, but on IE7, it doesn't work. In the css below, the second style is always shown in IE. any solution? <STYLE type="text/css"> .test1.test2 .test3{ width:90px; height:100px; } .test4.test2 .test3{ width:900px; height:100px; } </style> <div class="test1 test2"> <button value="test" class="test3"/> </div>

    Read the article

  • CSS: How to set remaining width as %, but having knowledge of only pixels

    - by Mega Matt
    Hi all, I've seen this question asked in a couple other contexts on SO, but I thought it would be worth asking again for my particular case. I'm trying to create some re-usable CSS classes for more consistency and less clutter on my site, and I'm stuck on trying to standardize one thing I use frequently. I have a container div that I don't want to set the height for (because it will vary depending on where on the site it is), and inside it is a header div, and then an unordered list of items, all with CSS applied to them. It looks a lot like this: I want the unordered list to take up the remaining room in the container div, knowing that the header div is 18px tall. I just don't know how to specify the list's height as "the result of 100% minus 18px". Does anyone have any advice in this situation? Thanks very much.

    Read the article

  • how this scaling down for css code is worked?

    - by harris
    this is a code for scaling down for css. i was wondering, how this worked. please someone explain to me part by part. thank you very much. /* ======================================================================== / / Copyright (C) 2000 - 2009 ND-Tech. Co., Ltd. / / All Rights Reserved. / / ======================================================================== / / Project : ScaleDown Created : 31-AUG-2009 / / File : main.c Contact : [email protected] / / ======================================================================== / / You are free to use or modify this code to the following restrictions: / / Acknowledge ND Tech. Co. Ltd. / / Or, put "Parts of code by ND Tech. Co., Ltd." / / Or, leave this header as it is. / / in somewhere in your code. / / ======================================================================== */ include "vm3224k.h" define CE0CTL *(volatile int *)(0x01800008) define CE2CTL *(volatile int *)(0x01800010) define SDCTL *(volatile int *)(0x01800018) define LED *(volatile short *)(0x90080000) // Definitions for async access(change as you wish) define WSU (2<<28) // Write Setup : 0-15 define WST (8<<22) // Write Strobe: 0-63 define WHD (2<<20) // Write Hold : 0-3 define RSU (2<<16) // Read Setup : 0-15 define TA (3<<14) // Turn Around : 0-3 define RST (8<<8) // Read Strobe : 0-63 define RHD (2<<0) // Read Hold : 0-3 define MTYPE (2<<4) /* EDMA Registers */ define PaRAM_OPT 0 // Options define PaRAM_SRC 1 // Source Address define PaRAM_CNT 2 // Frame count, Element count define PaRAM_DST 3 // Destination Address define PaRAM_IDX 4 // Frame index, Element index define PaRAM_RDL 5 // Element count reload, Link address define EDMA_CIPR *(volatile int *)0x01A0FFE4 // EDMA Channel interrupt pending low register define EDMA_CIER *(volatile int *)0x01A0FFE8 // EDMA Channel interrupt enable low register define EDMA_CCER *(volatile int *)0x01A0FFEC // EDMA Channel chain enable register define EDMA_ER *(volatile int *)0x01A0FFF0 // EDMA Event low register define EDMA_EER *(volatile int *)0x01A0FFF4 // EDMA Event enable low register define EDMA_ECR *(volatile int *)0x01A0FFF8 // EDMA Event clear low register define EDMA_ESR *(volatile int *)0x01A0FFFC // EDMA Event set low register define PRI (2<<29) // 1:High priority, 2:Low priority define ESIZE (1<<27) // 0:32bit, 1:16bit, 2:8bit, 3:reserved define DS2 (0<<26) // 1:2-Dimensional define SUM (0<<24) // 0:no update, 1:increment, 2:decrement, 3:by index define DD2 (0<<23) // 1:2-Dimensional define DUM (0<<21) // 0:no update, 1:increment, 2:decrement, 3:by index define TCINT (1<<20) // 0:disable, 1:enable define TCC (8<<16) // 4 bit code define LINK (0<<1) // 0:disable, 1:enable define FS (1<<0) // 0:element, 1:frame define OptionField_0 (PRI|ESIZE|DS2|SUM|DD2|DUM|TCINT|TCC|LINK|FS) define DD2_1 (1<<23) // 1:2-Dimensional define DUM_1 (1<<21) // 0:no update, 1:increment, 2:decrement, 3:by index define TCC_1 (9<<16) // 4 bit code define OptionField_1 (PRI|ESIZE|DS2|SUM|DD2_1|DUM_1|TCINT|TCC_1|LINK|FS) define TCC_2 (10<<16)// 4 bit code define OptionField_2 (PRI|ESIZE|DS2|SUM|DD2|DUM|TCINT|TCC_2|LINK|FS) define DS2_3 (1<<26) // 1:2-Dimensional define SUM_3 (1<<24) // 0:no update, 1:increment, 2:decrement, 3:by index define TCC_3 (11<<16)// 4 bit code define OptionField_3 (PRI|ESIZE|DS2_3|SUM_3|DD2|DUM|TCINT|TCC_3|LINK|FS) pragma DATA_SECTION ( lcd,".sdram" ) pragma DATA_SECTION ( cam,".sdram" ) pragma DATA_SECTION ( rgb,".sdram" ) pragma DATA_SECTION ( u,".sdram" ) extern cregister volatile unsigned int IER; extern cregister volatile unsigned int CSR; short camcode = 0x08000; short lcdcode = 0x00000; short lcd[2][240][320]; short cam[2][240][320]; short rgb[64][32][32]; short bufsel; int *Cevent,*Levent,*CLink,flag=1; unsigned char v[240][160],out_y[120][160]; unsigned char y[240][320],out_u[120][80]; unsigned char u[240][160],out_v[120][80]; void PLL6713() { int i; // CPU Clock Input : 50MHz *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) & 0xfffffffe; for(i=0;i<4;i++); *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) | 0x08; *(volatile int *)(0x01b7c114) = 0x08001; // 50MHz/2 = 25MHz *(volatile int *)(0x01b7c110) = 0x0c; // 25MHz * 12 = 300MHz *(volatile int *)(0x01b7c118) = 0x08000; // SYSCLK1 = 300MHz/1 = 300MHz *(volatile int *)(0x01b7c11c) = 0x08001; // SYSCLK2 = 300MHz/2 = 150MHz // Peripheral Clock *(volatile int *)(0x01b7c120) = 0x08003; // SYSCLK3 = 300MHz/4 = 75MHz // SDRAM Clock for(i=0;i<4;i++); *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) & 0xfffffff7; for(i=0;i<4;i++); *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) | 0x01; } unsigned short ybr_565(short y,short u,short v) { int r,g,b; b = y + 1772*(u-128)/1000; if (b<0) b=0; if (b>255) b=255; g = y - (344*(u-128) + 714*(v-128))/1000; if (g<0) g=0; if (g>255) g=255; r = y + 1402*(v-128)/1000; if (r<0) r=0; if (r>255) r=255; return ((r&0x0f8)<<8)|((g&0x0fc)<<3)|((b&0x0f8)>>3); } void yuyv2yuv(char *yuyv,char *y,char *u,char *v) { int i,j,dy,dy1,dy2,s; for (j=s=dy=dy1=dy2=0;j<240;j++) { for (i=0;i<320;i+=2) { u[dy1++] = yuyv[s++]; y[dy++] = yuyv[s++]; v[dy2++] = yuyv[s++]; y[dy++] = yuyv[s++]; } } } interrupt void c_int06(void) { if(EDMA_CIPR&0x800){ EDMA_CIPR = 0xffff; bufsel=(++bufsel&0x01); Cevent[PaRAM_DST] = (int)cam[(bufsel+1)&0x01]; Levent[PaRAM_SRC] = (int)lcd[(bufsel+1)&0x01]; EDMA_ESR = 0x80; flag=1; } } void main() { int i,j,k,y0,y1,v0,u0; bufsel = 0; CSR &= (~0x1); PLL6713(); // Initialize C6713 PLL CE0CTL = 0xffffbf33;// SDRAM Space CE2CTL = (WSU|WST|WHD|RSU|RST|RHD|MTYPE); SDCTL = 0x57115000; vm3224init(); // Initialize vm3224k2 vm3224rate(1); // Set frame rate vm3224bl(15); // Set backlight VM3224CNTL = VM3224CNTL&0xffff | 0x2; // vm3224 interrupt enable for (k=0;k<64;k++) // Create RGB565 lookup table for (i=0;i<32;i++) for (j=0;j<32;j++) rgb[k][i][j] = ybr_565(k<<2,i<<3,j<<3); Cevent = (int *)(0x01a00000 + 24 * 7); Cevent[PaRAM_OPT] = OptionField_0; Cevent[PaRAM_SRC] = (int)&camcode; Cevent[PaRAM_CNT] = 1; Cevent[PaRAM_DST] = (int)&VM3224ADDH; Cevent = (int *)(0x01a00000 + 24 * 8); Cevent[PaRAM_OPT] = OptionField_1; Cevent[PaRAM_SRC] = (int)&VM3224DATA; Cevent[PaRAM_CNT] = (239<<16)|320; Cevent[PaRAM_DST] = (int)cam[bufsel]; Cevent[PaRAM_IDX] = 0; Levent = (int *)(0x01a00000 + 24 * 9); Levent[PaRAM_OPT] = OptionField_2; Levent[PaRAM_SRC] = (int)&lcdcode; Levent[PaRAM_CNT] = 1; Levent[PaRAM_DST] = (int)&VM3224ADDH; Levent = (int *)(0x01a00000 + 24 * 10); Levent[PaRAM_OPT] = OptionField_3; Levent[PaRAM_SRC] = (int)lcd[bufsel]; Levent[PaRAM_CNT] = (239<<16)|320; Levent[PaRAM_DST] = (int)&VM3224DATA; Levent[PaRAM_IDX] = 0; IER = IER | (1<<6)|3; CSR = CSR | 0x1; EDMA_CCER = (1<<8)|(1<<9)|(1<<10); EDMA_CIER = (1<<11); EDMA_CIPR = 0xffff; EDMA_ESR = 0x80; while (1) { if(flag) { // LED = 0; yuyv2yuv((char *)cam[bufsel],(char *)y,(char *)u,(char *)v); for(j=0;j<240;j++) for(i=0;i<320;i++) lcd[bufsel][j][i]=0; for(j=0;j<240;j+=2) for(i=0;i<320;i+=2) out_y[j>>1][i>>1]=(y[j][i]+y[j][i+1]+y[j+1][i]+y[j+1][i+1])>>2; for(j=0;j<240;j+=2) for(i=0;i<160;i+=2) { out_u[j>>1][i>>1]=(u[j][i]+u[j][i+1]+u[j+1][i]+u[j+1][i+1])>>2; out_v[j>>1][i>>1]=(v[j][i]+v[j][i+1]+v[j+1][i]+v[j+1][i+1])>>2; } for (j=0;j<120;j++) for (i=0;i<160;i+=2) { y0 = out_y[j][i]>>2; u0 = out_u[j][i>>1]>>3; v0 = out_v[j][i>>1]>>3; y1 = out_y[j][i+1]>>2; lcd[bufsel][j+60][i+80]=rgb[y0][u0][v0]; lcd[bufsel][j+60][i+81]=rgb[y1][u0][v0]; } flag=0; // LED = 1; } } }

    Read the article

  • CSS drop-down menus pushing page content down

    - by Mason Jones
    This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance. Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML style="zoom: 100%; "> <HEAD> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> </HEAD> <BODY class="bodyclass" style="background:#BCE2F1; height: 100%;"> <DIV id="maincontainer" style="min-height: 100%;"> <STYLE type="text/css"> #cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; } #cssdropdown, #cssdropdown * { padding: 0; margin: 0; } #cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid; background-color: white; text-align: center; } #cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; } #cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; } #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; } #cssdropdown li.headlink:hover ul { display: block; text-decoration: none; } #cssdropdown li.headlink ul li a { padding: 5px; height: 15px; } #cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; } /* #cssdropdown a { color: #CCE9F5; } */ #cssdropdown ul li a:hover { text-decoration: none; } #cssdropdown li.headlink { background-color: white; } #cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; } </STYLE> <SCRIPT language="JavaScript"> $(document).ready(function(){ $('#cssdropdown li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); </SCRIPT> <DIV class="navigation_box" style="border: none;"> <DIV class="innercontent"> <DIV style="background: white; float: left; padding: 5px; border: solid 1px black;"> LOGO </DIV> <DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;"> <SPAN>Logged in as [email protected]</SPAN><BR> <UL id="cssdropdown"> <LI class="headlink"> <A href="http://localhost:3000/one">One</A> <UL style="display: none; "> <LI><A href="http://localhost:3000/one">Option One</A></LI> <LI><A href="http://localhost:3000/one">Option Two</A></LI> <LI><A href="http://localhost:3000/one">Option Three</A></LI> <LI><A href="http://localhost:3000/one">Option Four</A></LI> </UL> </LI> <LI class="headlink"> <A href="http://localhost:3000/two">Two</A> <UL style="display: none; "> <LI><A href="http://localhost:3000/two">Option Two-One</A></LI> <LI><A href="http://localhost:3000/two">Option Two-Two</A></LI> <LI><A href="http://localhost:3000/two">Option Two-Three</A></LI> </UL> </LI> <LI class="headlink" style="width: 80px;"> <A href="http://localhost:3000/three">Three</A> </LI> <LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;"> <FORM action="http://localhost:3000/search" method="post"> <P> Search: <INPUT id="searchwords" name="searchwords" size="20" type="text" value=""> <INPUT name="commit" type="submit" value="Find"> </P> </FORM> </LI> <LI class="headlink" style="width: 60px;"> <A href="http://localhost:3000/four">Four</A> </LI> <LI class="headlink" style="width: 60px;"> <A href="http://localhost:3000/logout">Logout</A> </LI> </UL> </DIV> </DIV> </DIV> <DIV id="contentwrapper" style="clear:both"> <DIV class="innercontent" style="margin: 0px 20px 20px 20px;"> <H1>Some test content here to fill things out a little bit.</H1> </DIV> </DIV> </DIV> <DIV id="footer" style="clear: both; float: bottom;"> <DIV class="innercontent" style="font-size: 10px;"> Copyright 2008-2010 </DIV> </DIV> </BODY>

    Read the article

  • Stretch Background Image Resizes With Browser Windows

    - by user241673
    I am trying to replicate the image resizing found at http://devkick.com/lab/fsgallery/ but with the code I have below, it is not working properly. When resizing the browser window to have small width and big height, white space shows up at the bottom of the page. feel free to see it & edit at http://jsbin.com/ifolu3 The CSS: html, body {width:100%; height:100%; overflow:hidden;} div.bg {position:absolute; width:200%; height:200%; top:-50%; left:-50%;} img.bg {min-height:50%; min-width:50%; margin:0 auto; display:block;} The JS/jQuery: $(window).resize(function(){ var ratio = Math.max($(window).width()/$('img.bg').width(),$(window).height()/$('img.bg').height()); if ($(window).width() $(window).height()) { $('img.bg').css({width:image.width()*ratio,height:'auto'}); } else { $('img.bg').css({width:'auto',height:image.height()*ratio}); } }); The HTML - (sorry for the formatting, had trouble getting "<" to show) [body] [div class="bg"] [img class="bg" src="bg.jpg" /] [/div] [/body]

    Read the article

  • How to make a css navigation menu "selected" option still clickable

    - by aslum
    So I have a fairly simple vertical CSS menu based off of UL. <ul class="vertnav"> <li><a href="unselected1.php">Item1</a></li> <li><a href="unselected2.php">Item2</a></li> <li><a href="selected.php" class="vertnavdown">Selected</a></li> </ul> I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work. Any suggestions? I thought I understood inheritance in CSS but I guess I don't. .vertnav{ list-style: none; margin: 0px; width: 172px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: left; height: 45px; } .vertnav li{ margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; border-bottom: 0px none; border-right: 0px none; border-top: 1px solid #fff; border-left: 0px none; text-align: left; height: 45px; width: 172px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .vertnav li a{ display: block; text-align: left; color: #666666; font-weight: bold; background-color: #FFEEC1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; height: 45px; } .vertnav li a:visited{ display: block; text-align: left; color: #666666; background-color: #FFEEC1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-decoration: none; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; height: 45px; } .vertnav li a:hover{ color: white; background-color: #ffbf0c; font-family: Verdana, Arial, Helvetica, sans-serif; height: 45px; text-decoration: none; font-weight: bold; } .vertnavdown a { display:block; color: #FFF; background-color: #ff9000; } .vertnavdown a:hover { background-color: #ffbf0c; } ^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^

    Read the article

  • Stretch Background Image & Resize With Browser Window

    - by user241673
    I am trying to replicate the image resizing found at http://devkick.com/lab/fsgallery/ but with the code I have below, it is not working properly. When resizing the browser window to have small width and big height, white space shows up at the bottom of the page. feel free to see it & edit at http://jsbin.com/ifolu3 The CSS: html, body {width:100%; height:100%; overflow:hidden;} div.bg {position:absolute; width:200%; height:200%; top:-50%; left:-50%;} img.bg {min-height:50%; min-width:50%; margin:0 auto; display:block;} The JS/jQuery: $(window).resize(function(){ var ratio = Math.max($(window).width()/$('img.bg').width(),$(window).height()/$('img.bg').height()); if ($(window).width() $(window).height()) { $('img.bg').css({width:image.width()*ratio,height:'auto'}); } else { $('img.bg').css({width:'auto',height:image.height()*ratio}); } }); The HTML - (sorry for the formatting, had trouble getting "<" to show) [body] [div class="bg"] [img class="bg" src="bg.jpg" /] [/div] [/body]

    Read the article

  • Div in HTML not floating left with CSS

    - by rusty009
    My div with class name 'header-body-right' doesn't seem to be floating to the left of my div named 'header-body-centre' and I can't understand why, here is my HTML, <!DOCTYPE HTML> <HTML> <HEAD> <TITLE> </TITLE> <meta charset="UTF-8" /> <link href="main.css" rel="stylesheet" type="text/css"> <META NAME="Generator" CONTENT="Notepad"> <META NAME="Author" CONTENT="00"> <META NAME="KEYWORDS" CONTENT="" /> <META NAME="DESCRIPTION" CONTENT="" /> </HEAD> <BODY> <div class="header-top"> </div> <div class="header-body"> <div class="header-body-centre"> <div class="logo"> <img src="logo.png" /> </div> </div> <div class="header-body-right"> test </div> </div> <div class="navbar"> </div> <div class="content-container"> </div> </BODY> </HTML> The CSS I am using for the code is posted below, body { margin:0px; padding:0px; } .header-top { height:11px; width:100%; background-image: url('HeaderTopNav.png'); background-repeat: repeat-x; } .header-body { width:100%; height:100px; } .header-body-centre { margin: 0 auto; height:100%; width:70%; } .header-body-right { width:15%; height:100px; float:left; } .navbar { height:35px; width:auto; border: 1px solid green; } .logo { margin-top:35px; float:left; } .quickNav { float:right; } .container { margin: 0 auto; background-color: #fff; border: 2px solid #c9c8c8; border-bottom: none; height:auto; overflow:hidden; width: 1000px; clear:both; } Can anyone see why? I have tried floating the header-bosy-centre and decreasing the width of the header-body-right but nothing works. Can anyone see what I have done wrong? I am out of ideas. Thanks.

    Read the article

  • CSS: Horizontal UL: Getting it centered

    - by Steve
    I'm trying to make a horizontal menu/list. It has a mix of independent buttons and buttons that are wrapped in their own individual forms. With much hacking I got all of the buttons, in forms and not in forms to align horizontally. I haven't been able to get the whole thing to center on the page though. Could someone point out to me what I am not seeing? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="shortcut icon" href="http://localhost:7001/nsd/images/favicon.ico"> <link rel="StyleSheet" href="veci_files/nsd.css" type="text/css"> <style type = "text/css"> #horizontal_li_menu_container ul { margin-left: auto; margin-right:auto; text-align:center; border: 1px solid green; width:1000px; } #horizontal_li_menu_container_ul { list-style-type: none; text-decoration: none; border: 1px solid red; } #horizontal_li_menu_container li { display: inline;float:left; } </style> </head> <body> <div id = "horizontal_li_menu_container"> <ul id = "horizontal_li_menu_container_ul"> <li> <input value="Update" onclick="location.href='#'" name="button" type="button"/> </li> <li> <form name="formExportVECI" method="post" action="exportveci"> <input name="person_id" value="661774" type="hidden"> <input name="submitExport" value="Export To Microsoft Excel" type="submit"> </form> </li> <li> <form id="ufdh" name="formImportVECI" action="importveci" method="post" enctype="multipart/form-data"> <input name="person_id" value="661774" type="hidden"> <input value="Import From Microsoft Excel" path="Upload" type="submit"> <input id="fileData" name="fileData" value="" type="file"> </form> </li> <li> <input value="Search/Home" onclick="location.href='search'" name="buttonHome" type="button"/> </li> </ul> </div> </body></html>

    Read the article

  • Child selector problem in IE7, IE8

    - by Raj
    Hi, I have a CSS style using child selectors in an HTML page as follows: <html> <head> <title>MSO Bug</title> <style type="text/css" media="screen,print"> ol{list-style-type:decimal;} ol > ol {list-style-type:lower-alpha;} ol > ol >ol {list-style-type:lower-roman;} </style> </head> <body> <div> <ol> <li><div>level1</div></li> <ol> <li><div>level2</div></li> <ol> <li><div>level3</div></li> </ol> </ol> </ol> </div> </body> </html> In Firefox, the CSS works properly - the first list level starts with '1', the second with 'a', and the third with 'i' as expected. But this doesn't work in IE7/8! (I'm aware of descendent selectors - for some reason I can't use that here)

    Read the article

  • Making CSS Render in a simialr way on FireFox 3.0.15/IE 6.0 & 7.0

    - by R.R
    Following css renders differently depends on the browser (mainly with Firefox) Firefox: the border-left-style:dashed does not seem to take effect as desired and black lines are shown instead. Also font seems to be another issue using em as they respond relatively better in cross browser. When i used pixel its a mess but not sure em is better or not. I am not a CSS expert and working with CSS makes me feel worse than dealing with a second hand car dealer. .Main { font-family: Arial, "Trebuchet MS", Sans-Serif; font-size: 0.8em; border:0px; } .Header { font-family: Arial, "Trebuchet MS", Sans-Serif; font-size: 1.2em; color:#666; background : url("../images/header.jpg") repeat-x top left; padding-left: 10px; padding:4px; text-transform:uppercase; border:1px; border-left-style:dashed; border-bottom-width:thin; border-collapse:collapse } .Footer { color:#666; font-family: Arial, "Trebuchet MS", Sans-Serif; font-size: 0.7em; } .Footer td { border-style:none; text-align:center; } .Footer span { color:#666; font-family: Arial, "Trebuchet MS", Sans-Serif; font-size: 0.7em; font-weight:bold; text-decoration:underline; border-style:none; } .Footer a { font-family: Arial, "Trebuchet MS", Sans-Serif; font-size: 0.7em; color:#666; } .Results-Item td { margin-left: 10px; vertical-align:middle; color:#666; background-color: white; font-size: 1.2em; padding:4px; font-family: Arial, "Trebuchet MS", Sans-Serif; padding-left: 10px; line-height: 20px; border:1px; border-left-style:dashed; border-bottom-width:thin; border-collapse:collapse; } .Results-AltItem td { margin-left: 10px; vertical-align:middle; color:#666; font-size: 1.2em; /* _font-size: 1.2em; /* IE6 hack */ padding:4px; font-family: Arial, "Trebuchet MS", Sans-Serif; background-color: #ccc; padding-left: 10px; line-height: 20px; border:1px; border:1px; border-left-style:dashed; border-bottom-width:thin; border-collapse:collapse; } Amount { text-align:right; }

    Read the article

  • Shrinking image by 57% and centering inside css structure

    - by Johua
    Hy, i'm really stuck. I'll go step by step and hope to make it short. This is the html structure: <li class="FAVwithimage"> <a href=""> <img src="pics/Joshua.png"> <span class="name">Joshua</span> <span class="comment">Developer</span> <span class="arrow"></span> </a> </li> Before i paste the css classes, some info about the exact goal to accomplish: Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing. After resizing, the picture needs to be centered vertical&horizontal inside a: 68x90 boundaries. So you have an LI element, wich has an A element, and inside A we have IMG, IMG is resized by 57% and centered where the maximum width can be of course 68px and maximum height 90px. No for that to work i was adding a SPAN element arround the IMG. This is what i was thinking: <li class="FAVwithimage"> <a href=""> <span class="picHolder"><img src="pics/Joshua.png"></span> <span class="name">Joshua</span> <span class="comment">Developer</span> <span class="arrow"></span> </a> </li> Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work. I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need. li.FAVwithimage { height: 90px!important; } li.FAVwithimage a, li.FAVwithimage:hover a { height: 81px!important; } That's it what's relevant. I have not included the classes for: name,comment,arrow And now the classes that are incomplete and refer to IMG. li.FAVwithimage a span.picHolder{ /*put the picHolder to the beginning of the LI element*/ position: absolute; left: 0; top: 0; width: 68px; height: 90px; diplay:block; border:1px solid #F00; } Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set. li.FAVwithimage span.picHolder img { max-width:68px!important; max-height:90px!important; } This is the class wich should shrink the pic by 57% and center inside picHolder Here I have a drawing describing what i need:

    Read the article

  • Should I aim for fewer HTTP requests or more cacheable CSS files?

    - by Jonathan Hanson
    We're being told that fewer HTTP requests per page load is a Good Thing. The extreme form of that for CSS would be to have a single, unique CSS file per page, with any shared site-wide styles duplicated in each file. But there's a trade off there. If you have separate shared global CSS files, they can be cached once when the front page is loaded and then re-used on multiple pages, thereby reducing the necessary size of the page-specific CSS files. So which is better in real-world practice? Shorter CSS files through multiple discrete CSS files that are cacheable, or fewer HTTP requests through fewer-but-larger CSS files?

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 33 34 35 36 37 38 39 40 41 42 43 44  | Next Page >