Search the Community
Showing results for tags 'responsive'.
-
I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
-
Hello, New here I am currently have 3 different stylesheets for my website: Desktop - layout.css is working fine. Tablet - tablet.css is also working fine. now I have a css for mobile which is mobile.css. On the mobile.css when I look the version on an iPhone 6 the navigation bar is so small. here is the index.html and mobile.css file: Mobile CSS File: body { margin: 0; background-image: url(../images/bg2.jpg); } img { max-width: 100%; height: auto; } ul.topnav { list-style-type: none; margin: 0; padding: 25px; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 30px 16px; text-decoration: none; transition: 0.3s; font-size: 25px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:320px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:320px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } Index.html file is: <html> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width,initial=1.0"> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 1023px)" /> <link href="css/layout.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" /> <title>Morris Technologies of Amarillo</title> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.jpg" alt="Morris Technologies of Amarillo" width="1000" height="300"> </div> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div> <script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body>
-
Hi all, I'd like to make a responsive navigation bar with a drop down menu using jQuery but I'm having some difficulties getting it work properly. I've just started learning jQuery so my knowledges in this language are very limited for the moment. I know there is a tutorial precisely for that on w3school but I followed this tutorial on YouTube as the result is closer to what I would like to end up with. Besides, the code looks easier to me. What I'm trying to do is basically the same thing but without using an external <div> for the menu bar, which I would like to include in the list elements. To do so, I hid all the list elements using a max-height to 0 except for the "menu" one, then I toggleClassed all the list elements but the "menu" one so they get the new declaration max-height= 3em. Unfortunately, the menu doesn't drop down when clicking on the "menu" bar. Any help? Thanks. Here is the .html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="responsiveMenu2.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Test</title> </head> <body> <header> <h2>responsive navigation (mobile first)</h2> <nav> <ul> <li class="menu" id="menu"><a href="#">menu</a></li> <li class=""><a href="#">home</a></li> <li class=""><a href="#">galleries</a></li> <li class=""><a href="#">news</a></li> <li class=""><a href="#">about</a></li> <li class=""><a href="#">contact</a></li> </ul> </nav> </header> <section> <article> Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet. </article> </section> <script> $(".menu").on("click", function(){ $("nav ul li").not(".menu").toggleClass("showing"); }); </script> </body> </html> And the .css *{ box-sizing: border-box; } html{ width: 100%; min-height: 100%; } body{ height: 100%; margin: 0; padding: 0; text-align: center; } header{ background-color: #00795f; width: 100%; padding: 40px 0 0 0; color: white; text-transform: capitalize; } nav{ margin-top: 40px; width: 100%; background-color: #43a286; text-transform: capitalize; } nav ul{ list-style-type: none; padding: 0; margin: 0; } nav ul li:not(#menu){ max-height: 0; -webkit-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li a{ display: block; width: 100%; line-height: 3em; text-decoration: none; color: white; } nav ul li a:hover{ background-color: #399077; } section{ line-height: 1.5em; font-size: 0.9em; padding: 0; width: 100%; } article{ text-align: justify; padding: 5% 4%; } #menu{ background-color: #005c48; cursor: pointer; } .showing{ height: 3em; } @media screen and (min-width: 680px){ #menu{ display: none; } nav{ height: 3em; } nav ul li{ display: inline-block; margin: 0 1%; } nav ul li a{ padding: 0 20px; line-height: 3em; } section{ max-width: 900px; margin: 0 auto; } }
- 4 replies
-
- 1
-
-
- responsive
- drop down
- (and 2 more)
-
Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love -
Hi, We are in the process of building a responsive webpage. At gallery we encounter a problem where at certain resolutions (1280 x 800 for example) where the images on the gallery page do not arrange correctly. This is the test page: http://pavexparquet.pdtestare.eu/1-gallery.htm tested at this resolution gives page arrangement errors: http://quirktools.com/screenfly/#u=http%3A//pavexparquet.pdtestare.eu/1-gallery.htm&w=800&h=1280&a=24 After trying different solutions - making 4 columns instead of 6, changing text length, changing text setups - we have no idea where the problem could be. Can somebody help? Thank you. Tim
-
Hi, I want to create a "Responsive Email" template which support all the device. Also will show in outlook, gmail etc. Please help me how can I create it? Thanks
-
I am making a contact form in a new template liquid for a shopify website. Everything works and looks great in desktop mode but I've noticed as you drag the screen to a skinnier size some inline-block elements jump down perfectly as they are supposed to, the problem is other smaller text boxes are jumping up over other text fields to try and fill that gap. Also I've had issues with the legend and labels abandoning the text box they belong to jump up the form and fill space. Obviously I do not want this, how can I fix it?
-
Why is the next code not responsive? I mean, if I make the screen smaller, the columns will stay horizontally. Or see the example on w3schools: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_percent&stacked=h. Also this example seems to be non responsive. <div class="w3-row"> <div class="w3-col" style="width: 40%; background-color: silver"> <p>[w3-col 40%]Lorem ipsum dolor sit amet.</p> </div> <div class="w3-col" style="width: 40%; background-color: green"> <p>[w3-col 40%]Lorem ipsum dolor sit amet.</p> </div> <div class="w3-col" style="width: 20%; background-color: red"> <p>[w3-col 20%]Lorem ipsum dolor sit amet.</p> </div> </div>
-
Hello, I recently added different menu navigations for specific pages on my site: millcityenergy.com using the wordpress plug-in page specific menu items while it works fine for desktop, the mobile version displays all the pages in the dropdown (select a page). I've tried different custom css codes and as a novice, I have been unsuccessful. Screenshot attached. Any idea of how to narrow down the pages and/or follow the same navigation as desktop? Any help will be greatly appreciated. Thank you, Lauren
-
Hello! I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution. I do work with div tags. Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300px Result: It jumped UNDER the content that should be on the left of it. URL: http://www.nimblefeather.com/index.php Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's. I tried: min-width. Result: No visible change. URL: http://www.nimblefeather.com/comics.php Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable? URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?) Thanks in advance =D
-
I have a php based website script which I want to make responsive. What are the ways to make it responsive? I am not a developer so need an easy way. I know a little bit of html and css. Download the template from https://www.dropbox.com/s/pfolvxhn9co2qd3/bluesky.zip?dl=0 to have an idea about the coding and website structure.
-
I have a script developed in php. It is non-responsive. I want to convert it to a responsive website. Is there any free tool or software or step by step guide to do it? I know a little html and css, but not php. I was wondering if there is a place where I can import my existing template, apply bootstrap with one click and export. It is an open source script and can be downlaoded from phpb2b.com.
-
Good morning guys, I am using your w3 css to build front end form in wordpress for users to add content. While everything is looking great I am having a problem with the text area. Is there a way to make it as responsive as the normal input field? I have tried just creating it with <textarea></textarea> but it doesn't look asnice as the rest of the form. Thanks Brenton
-
Hi! I modified the wordpress slideshow to make it much nicer looking and added text below, however, I am having a horrible time with the responsive aspect of it...the location of the control buttons (to move the show forward and backwards), as well as the simple text block below the slides move an enormous amount depending on the screen size! Is there anything I can do to make the location of these elements dependent on each other so that they re-locate accordingly? Otherwise, no one is going to be able to view the slides! The page I am talking about can be found here: http://annascherman.com/made-in-birmingham/
-
HI: I have a responsive web design with links to pages at another website, which is a site that is NOT mine. However, the pages at the other site have 2 different URLs. For example: (www.thispage.com/page-1.html or www.m.thispage.com/home.html, as a reference to a mobile page) . In other words, one link at the other site is for desktop viewers and the other link is for mobile users, but all links meant for desktop users are redirected and go directly to their home page (not to the mobile equivalent page). If a user at my website clicks on a link to their website from a mobile device, they are clicking on a link meant for desktop users. But if the user is at my website on a mobile device, the other website redirects them to their mobile "HOME PAGE", thus requiring the user to navigate to the specific page FROM THE HOME PAGE OF THAT SITE. [NOTE: I have the direct links to the specific mobile pages at the other site, but just don’t know how to give my mobile users the option to access them from a single click.] I want my mobile users to be able to go directly to the specific page of the other site without having to navigate to it from the home page of the other site. In short, if my user is on a desktop, they will go to the correct page. But if on a mobile device, they will go to the home page (not the specific page) of the other site and have to navigate to the specific page from there, which can be a real hassle. Here is my question: Is there an inline html or javascript code I can add to each outgoing link that will take the user directly to the specific page I want them to land on if they are using a mobile device instead of a desktop? For example: href = www.abcd.com/page.html (but if less than 800px) go to www.m.defg.com/page2.html. Please keep in mind, my site is already responsive, so I do not need a redirect for my pages, as they are mobile ready. I just need to create redirect links to the pages of the other website if my user is on a mobile device. Please help. Thank you.
-
Hi everyone! I'm using the "Electric Multi-Purpose HTML5" theme from ThemeForest and I have to limit the width to 1000px instead of 1300px which wasn't a problem to change in the css file of course. http://treacle.faceversa.net/assets/custom/css/style.css The boxed layout has changed to 1000px now but some parts like the portfolio do not adjust to it, as it can be seen in the screenshots below. Or here: http://treacle.faceversa.net/ At first I thought I could fix this via breakpoints, but there are only breakpoints for the screen sizes 400, 768 and 992 included. When I bring the browser window to a size of about 1170px everything looks fine (picture below). I would like to know what is influencing these adjustments if it is not a breakpoint. Are there relative css attributes used? Could someone tell me which attributes I would have to change or if there is a global parameter to make these adjustments happen, even if the browser window is bigger than 1170?... I hope its understandable what I would like to do; it would be awesome to get some help; I was working on this for so long now and the author of the template doesn't respond.
-
Hi again, thanks for some respond in past question really feel helpfull to discuss here. let me describe my problem i set images in front end for original 383 px * 533px but then realize that my client has photo 2024px * 2559px, succesfuly make it responsive but not good looking sprawl but the point is really near with responsive, here is my old css for 383 px * 533px /*large desktop*/.img-header { height:auto; width:250px; top: 0px; position: absolute;}/*landscape tablet*/.img-header { height: 240px; width:180px; top: 10px; position: absolute;}/*Potrait tablet*/.img-header { height: 210px; width:160px; top: 20px; position: absolute;}/*landscape phone*/.img-header { height: 200px; width:160px; top: 10px; position: absolute;}/*portrait phone*/.img-header { height: 130px; width:110px; left:0px; margin-top:-20px; margin-bottom:10px; position: absolute;} so any idea to make this images to responsive with original size from my client, what should i use for keep responsive used % or px, any link or explanation will be apreciate, Thanks Freddy
-
The columns are showing full width in IE7 & 8 even though i have set to 'col-sm-4'. i have used bootstrap files n respond.min.js locally inorder to eliminate probs caused by CDN links.. <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="bootstrap.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="respond.min.js"></script> <![endif]--> <title>Untitled Document</title><style type="text/css">.container-fluid { background-color:pink;}</style></head><body><div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> </div></div></body>
-
I find this tutorials very useful and I think it will be really handy if you do Bootstrap tutorial. On site getbootstrap.com is nice documentation, but some things aren't explained so well.Who think this is good idea? Thanks.
-
Hi! My site's navigation looks and works pretty clean for computer use and viewing but when I pull it up on my iphone it's pretty sloppy.. I am looking for a way to code it for mobile devices so its a clean responsive look and user functionality isn't difficult to figure out.. Here is the site.. www.asamusic.us Thanks!!
-
Hi, I'm in the process of making a todo list app in HTML5. This is how it looks at this moment: I'm not a HTML coder so I first wanted to see if I could do the interface in CSS. I use border-image to handle 9 slicing and I'm happy with the result. The interface is fully responsive so I can scale the main DIV and everything scales accordingly (when scaling horizontally buttons will grow larger filling the space etc). The second part of my quest now is to make the relevant buttons clickable and linking on a weblink with preferably a mouseover and mousedown effect and this is where I'm stuck. My requirements are as follows; - The solution should work with the responsive aspect of the tool; the clickable zone should scale up or down automatically. - The text contained in the buttons should not affect the clickability or change the mouse pointer unless its the weblink mouse pointer (problem visible in example bellow). Nice but not required; - It would be great if the solution allowed me to tweak the clicking zone manually once(that will work well when the button scales). For example I have buttons with quite large shadows and I might want to avoid having the shadows clickable, instead I would substract a couple of pixels down and perhaps left and right from the button's DIV area. I've made a simple test page with the border-image method and my buttons images if anyone wants to give it a shot. Here's the JSFiddle page: http://jsfiddle.net/gYLn8/ And the html code: <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.MouseoverButton { border-width: 15px 21px 17px 20px; /* border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ /* -moz-border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ -webkit-border-image: url(http://www.stormunited.com/images/test/Button_UnPushed.png) 15 21 17 20 repeat stretch; position: absolute; font-style: normal; color: #B94400; text-align: center; padding-right: 73px; padding-top: 47px; left: 63px; top: 108px; font-size: xx-large; cursor: hand;}body { background-color: #2A2A2E;}</style></head><img src="http://www.stormunited.com/images/test/Button_UnPushed.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Hover.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Pushed.png" alt=""/><body><div class="MouseoverButton">Button</div></body></html>
-
there is a div id =certificate and inside that div there is a image ,image height < div heightpicture below shown theseactual sizes of div,imagefor responsive design when browser resize image size need to vary.when browser width reducing image need to be small without changing its aspect ratio . i mean it has to be like picture belowfor that i used for image width 100% now image is responsive but it has a another effect on image width it is image take all the width of certificate div.it leads to change aspect ratio of the image.its shown belowfor responsive design i need a way to keep aspect rato of the image and also image will not exceed the parent div sizehere is my code both html and css html code <!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/> <title>abc</title> </head> <body> <div class="wrapper"> <div id="certificate"><img src="images/roundlogo.jpg" alt="" /></div> </div> </body> </html> css code @charset "utf-8"; /* CSS Document */ #certificate { width:950px; border:2px solid; } #certificate img { padding-left:50px; } .wrapper { width:950px; margin:0 auto; } @media screen and (min-width:181px) and (max-width:950px) { .wrapper { width:100%; } #certificate { width:100% } #certificate img { padding-left:5.263%; } }here is my fileshttp://www.speedyshare.com/m38eN/New-folder-2.rar -
I have an image with the following css properties. img.mainImg { width: 100%; height: auto; max-height: 1000px; } This causes the img to resize with the browser window, while keeping it's height to width ratio. This is almost the desired effect. What I am trying to achieve, however, is for the image to stop resizing once it has reached a certain width, and then start to crop the image instead. Can this be achieved with CSS, using media queries?
-
What is the best way to acheive a responsive vertical centered position of an element within an element (e.g. a div within a div)? I know this would probably be a lot easier to accomplish using JavaScript, but I want to know of the best ways to do it with CSS first.Any help would be appreciated. -
Dear people I'm new here and I'm making my first steps in responsive design. I'm not english speaker and I will try to explain my problem in my better english. I'm testing a simple grid of 4 columns using 4 divs with width = 23 % (each div) and left and right margins = 1 %........ margin: 0% 1% 15px 1%; padding: 0% 0% 0% 0%; In other words..... 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% = 100 % ------------------- ------------------- -------------------- ------------------- All this works fine in Internet Explorer, Mozilla, Opera and Safari and each div have the same separation respect the neighbor div,..... ... BUT THIS NOT HAPPENS IN CHROME!!!! After this, I tried usig PADDING: margin: 0% 0% 0% 0%; padding: 0% 1% 15px 1%; and the results are different. With "Padding" it works fine in Internet Explorer, Chrome, Mozilla and Opera and each div have the same separation respect the neighbor div... ... BUT THIS NOT HAPPENS IN SAFARI!!!! I can't understand why this happens because it is a very basic concept... margin... padding.... there are no complicated things. I attach the TESTING MARGINS AND PADDINGS.zip file containing a folder with html and jpg files to you can view it. HTML files contains the CSS code into each html file. I think the margin solution is better, but my question is: How to make only for Chrome ...... that the CSS code specify the use padding in place of margins?? Do i need to use some prefix like -webkit- , etc? I hope you can help me to solve this. Thank you in advance!TESTING MARGINS AND PADDINGS.zip GusSiglo21
